2019-02-05に投稿

GatsbyJsでFontを変更するTypeface編

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 }

これで動く。

Originally published at www.corylog.com
ツイッターでシェア
みんなに共有、忘れないようにメモ

view_list [連載] ブロガー向けGatsby講座
第24回 GatsbyJSでStaticにファイルを置く
第25回 GatsbyJsでWebpackバンドルサイズを確認する
第26回 GatsbyJsでFontを変更するTypeface編
第27回 GatsbyJSでStyled Componentsを使う
第28回 GatsbyJsでSitemapを使う

aocory

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント