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はβバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

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

関連記事

コメント