はじめに
GatsbyでWebフォントをセルフホスティングする方法を紹介します。
セルフホスティングをすると、Google Fontsなどのサービスからフォントを取得する場合と比べて、パフォーマンスが向上するというメリットがあります。
フォントのセルフホスティングとは
セルフホスティングとは、自前のサーバに置いたフォントファイルをwebページのフォントとして使用することです。
Google Fontsなどのサービスがもつサーバからフォントを取得する方法とは異なります。
セルフホスティングするメリット
セルフホスティングをするメリットは、Webページのパフォーマンスが向上することです。
サービスがもつサーバからWEBフォントを取得する場合は、そのサーバにHTTPリクエストをする必要があり、日本語などの文字の種類が多いフォントの場合は、大きなボトルネックになってしまいます。
しかしながら、セルフホスティングをすると、上記のフォント取得による遅延を軽減することができます。
使用するパッケージ
Fontsourceというモノレポから好きなフォントを選び、インストールします。
自前でフォントファイルを、デュレクトリに配置するという方法もありますが、設定が面倒臭いのでライブラリに頼ることとします。
実装方法
Google Fontsにも存在する「Noto Sans JP」をインストールすることを例に実装方法を説明します。
パッケージのインストール
まずパッケージをインストールします。
yarn add fontsource-open-sans
パッケージマネージャーにnpmを使用している場合は下記の通りです。
npm install fontsource-open-sans
Layout.jsにimportする
Layout.jsに下記のようにimportします。
import 'fontsource-noto-sans-jp';
上記では、デフォルトのフォントウェイトに、全てのスタイル(Boldなど)が含まれる状態でimportしてしまうため、下記のように使用するフォントウェイトとスタイルを指定すると、ペイロードサイズを削減できます。
import "fontsource-noto-sans-jp/700.css"
import "fontsource-noto-sans-jp/900-normal.css"
あとは、CSSでfont-familyを指定してあげれば、使用ができるようになります。
まとめ
Fontsourceというライブラリを使用して、GatsbyでWebフォントをセルフホスティングする方法を紹介しました。
参考になれば幸いです！