GatsbyJSでFontを変更したい

以前、gatsby-plugin-typographyで対応する方法を検討した。 しかし、Noto Sans JPなどのフォントを使う時はGoogleフォントを読み込んでしまい、パフォーマンスが落ちるのが気になった。

Typefaceを使う

そこで、Gtasbyでは最近Typefaceを推奨している。 npmでインストールしてimportで読み込む仕組みでこっちのほうが早いらしい。 早速使ってみた。

• Typefaceのインストール
• Layout.jsにインポート
• css設定

Typefaceのインストール

今回はlatoというFontをインストールしてみる。

npm install --save typeface-lato

Layout.jsにインポート

インストール出来たらLayout.jsにインポートする

import 'typeface-lato'

これだけではFontは動かないCSSの設定が必要になる。

CSSに記載

CSSに記載する。

 { font-family: Lato }

これで動く。