GatsbyJSでGoogleFontsを使いたい

GatsbyJSでブログを作っていく中で、GoogleFontsをセルフホスティング¹で導入しました。
その方法を記事にしています。

GatsbyJS自体の導入方法については割愛しています。ご了承ください。

やりたいこと

GatsbyJSで作ったサイトでNoto Sans JP(GoogleFonts)を使いたい

方法

冒頭の通り今回はセルフホスティングで実装します。
GoogleFontsのセルフホスティングは「＠fontsource」というパッケージで実現できます。

＠fontsourceの導入

npmもしくはyarnで普通にインストールを行います。
npmの場合、npm5.0.0以降は--saveがデフォルトで動作するようになったので省略しています。

npm i @fontsource/noto-sans-jp

インストールが終わったら、js側でimportします。
インポート先は環境にもよりますが、Layout.js等のサイト全体に関するファイルがよいです。

import "@fontsource/noto-sans-jp"

あとはCSSのfont-familyで"Noto Sans JP"を指定してやれば表示されます。

セルフホスティングにした理由

実装方法としてtypographyを使用する方法もありますが、読み込みに多少の時間を要します。Jamstackはそれ自体が高速なため、かえってその読み込み時間が悪目立ちしてしまいます。そのため、今回は採用を見送りました。

セルフホスティング方式であれば、ホスティングサービスの高速なCDNを活用できるため、速度アップに繋がります。

---

1. 同一ホスト内にデータを持たせておくこと ↩