Gatsby Starter BlogでWebフォントを利用する

2021-05-17 23:36

Gatsby Starter BlogにWebフォントを導入する最適な手段を検討する。

はじめに

Webフォント導入にあたってGoogle先生に聞いてみたら、結構いろんな方法が引っ掛かった。しかし、Gatsby公式ドキュメントの推奨する方法が更新されているらしく、情報の古いものには現在はDeprecatedなものもあった。

よって、2021年5月現在で最も最適な手段を探す。

公式ドキュメントのRECIPESを見てみると、確認できた手順は以下3パターン。

まー他にも手段はたくさんあるのだろうけど、今回はこのRECIPESに提示されているものが最も最適な手段だと判断することにした。

挙げた3つのうちどれを選ぶかを決める。

いきなり身も蓋もないけど、ローカルにフォントを置く方法。ごくごくシンプルな方法で、Gatsbyを使おうって程度の知識がある人は解説も不要な内容だと思うけど、フォントファイルをsrc/fonts/とかに置いてCSSで読むだけ。

これでも別にいいんだけど、サイズの大きいフォントファイルだと相応に読み込み負荷が高いため、日本語ブログとしてはやはりハードルが高い。

Fontsourceを使ってGoogle Fontsをプロジェクト内(ローカル)でホストする方法。

Google Fontsはフォントを細かい単位でサブセット化し、必要分のみを読み込むような仕組みにすることで軽量化を実現しているらしい。以下のサイトが参考になった。

Google fontsをURLから直に読み込むでも良いのだけど、公式にも書かれている通り、ひと手間かけて高いパフォーマンスを目指す感じ。

まぁ、これが正解かは賛否ありそうだけど、今回はこの方法を選んだ。

こちらも、Google Fontsをローカルでホストする方法。コマンド等は多少異なるものの、Fontsourceと同じことが実現できるため特に気にしなければこちらでも良い。

ただし、Typography.jsの説明にて

A powerful toolkit for building websites with beautiful typography.

と書かれている通り、これ自体は単にWebフォントを導入するというだけのものではなく、フォント周りの各種設定を細かく調整したりするようなスゲー機能が沢山あるライブラリらしい。

従って、Webフォントを導入することだけを目的とする場合は過剰になってしまう。大は小を兼ねるという考え方もあるけれど、今回は使わないことにした。

フォントの導入から、ブログへの適用までの手順を書いていく。

まず、Google Fontsで使いたいフォントを選ぶ。今回は試しに”Noto Sans JP”でやってみることにする。

Google Fontsで使いたいフォントを選ぶ

使いたいフォントを見繕ったら、Fontsourceのリポジトリからpackageディレクトリを開き、使用するフォントの名称を探して確認する(今回はnoto-sans-jpとなる)。

フォント名を確認したら、コマンドでフォントパッケージをダウンロードする。 @fontsource/の後ろは使うフォント名。

Shell

npm install @fontsource/noto-sans-jp

パッケージを導入したら、適当なところでフォントの読み込みをする。読み込む場所は、公式によると推奨はlayout.jsで、代替としてindex.jsやgatsby-browser.jsでも良いとのこと。

src/components/layout.js

import "@fontsource/noto-sans-jp"

見出しなどでWeightを変えたい場合は必要な分を読み込む必要がある。例えば本文が400で見出しが500の場合は以下のようにする。なお、デフォルトは400になるため、400の方は前述の書き方でも可。

src/components/layout.js

// 400の方はデフォルトの書き方でも良い
import "@fontsource/noto-sans-jp/400.css"
import "@fontsource/noto-sans-jp/500.css"

読み込んだら、後はCSS上でフォントを指定すれば良い。

src/components/layout.css

body {
  font-family: "Noto Sans JP";
}

対応Weightはフォントによって異なるため、先程のpackageの中の該当フォントのディレクトリを開けば確認可能。

WeightごとのCSSファイルを確認する

これでフォントを変えることができた。