gatsby-starter-blog のフォントを変更する

このブログは gatsby-starter-blog を使っているが、デフォルトだとなんとも言い難い見た目だったのでまずはフォントを変えてみた。
こちらの Self-host Google Fonts with Fontsource を参考にフォントを使うように設定する。

https://www.gatsbyjs.com/docs/how-to/styling/using-web-fonts/

設定の手順は Fontsource のドキュメントにも書いてある。

https://fontsource.org/docs/getting-started

手順

手順は以下のようになる。

1. Google Fonts でお好みのフォントを探す（オプション）
2. Fontsource でそのフォントを探す
3. npm install する
4. フォントを import
5. css でフォントを指定

Google Fonts でお好みのフォントを探す

探しやすいかなということで Google Fonts でお好みのフォントを探す。
使いたいフォントが決まっている場合はスキップ。

https://fonts.google.com/

Fontsource でそのフォントを探す

https://fontsource.org/fonts

このページでフォントを探す。

npm install する

上記で見つけたフォントのページの Quick Installation というところに yarn コマンドが書いてある。
自分は yarn は使ってないので npm を実行。

npm install @fontsource/m-plus-2

フォントを import

gatsby のページにあるように gatsby-browser.js に import を記述。

import "@fontsource/m-plus-2"

css でフォントを指定

style.css にフォントを指定。

--font-body: "M PLUS 2", sans-serif;
--font-heading: "M PLUS 2", sans-serif;