以前、gatsby-plugin-typographyで対応する方法を検討した。
しかし、Noto Sans JPなどのフォントを使う時はGoogleフォントを読み込んでしまい、パフォーマンスが落ちるのが気になった。
そこで、Gtasbyでは最近Typefaceを推奨している。
npmでインストールしてimportで読み込む仕組みでこっちのほうが早いらしい。
早速使ってみた。
今回はlatoというFontをインストールしてみる。
npm install --save typeface-lato
インストール出来たらLayout.jsにインポートする
import 'typeface-lato'
これだけではFontは動かないCSSの設定が必要になる。
CSSに記載する。
{ font-family: Lato }
これで動く。
第24回 | GatsbyJSでStaticにファイルを置く |
第25回 | GatsbyJsでWebpackバンドルサイズを確認する |
第26回 | GatsbyJsでFontを変更するTypeface編 |
第27回 | GatsbyJSでStyled Componentsを使う |
第28回 | GatsbyJsでSitemapを使う |
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント