webサイト、アプリケーション実装において、フォントの取り扱いは必要不可欠です。
手軽に多彩なフォントを使うために、Google Fonts APIを介してwebフォントを使用することが一般的になっています。しかし、サイトパフォーマンスの観点で言えば、fontサーバーにリクエストを発行し取得する方法は必ずしもベストでないことがあります。
Gatsby.jsのドキュメントでは、Fontsourceを用いたGoogle Fontsのセルフホスティングが紹介されています。本記事ではそれについて紹介します。
Fontsourceを用いたセルフホスティング
Fontsourceは、npmパッケージとして管理されたオープンソースフォントです。
Google Fontsのようなホストされたサービスに対するネットワークリクエストが発生しないため、その分の遅延を軽減させることができます。
使い方
Gatsby公式のSelf-host Google Fonts with Fontsourceを参考に進めていきます。
使い方はシンプルで、対応しているフォント名のパッケージをinstallし、読み込むだけで完了します。
// Robotoを使用する場合
yarn add @fontsource/roboto
インストールが完了したら、global CSSを管理する場所から読み込みましょう。公式では、gatsby-browser.jsでの記述が推奨されています。
import "@fontsource/roboto" // デフォルトではウェイト400が読まれる
import '@fontsource/noto-sans-jp'
特定のウェイトを読み込む場合は次のように指定します。
import '@fontsource/roboto/500.css'
import '@fontsource/roboto/700.css'
import '@fontsource/noto-sans-jp/400.css'
import '@fontsource/noto-sans-jp/700.css'
最終的にfont-familyで指定することで適用されます。
body {
font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}
buildされた結果を見てみると、次のようにstatic上でフォントが管理されていることが分かります。また、重めの日本語フォントであるNoto Sans JPは複数に分割して管理されていることが分かります。
/static
- roboto-all-500-normal-0ab669b7a0d19b178f57d46f0e0db5cb.woff
- roboto-all-700-normal-a457fde362a540fcadff80329251b6ae.woff
- noto-sans-jp-0-400-normal-04bfd10ff771281a4dcff068531cb779.woff2
- noto-sans-jp-1-400-normal-04bfd10ff771281a4dcff068531cb779.woff2
- noto-sans-jp-2-400-normal-e630e01b97c8aa84a28bfc2670ba64be.woff2
- ...
セルフホスティングが可能なライセンスなのか注意する
ライブラリやプログラムと同じように、フォントも誰かが開発した著作物です。全てのフォントが自由に再配布したり、商用利用できるわけではありません。
例えば、OSにインストールして使用するタイプの有料フォントを勝手にサーバーにアップロードして使用することは、ほとんどの場合ライセンス上で認められていません。このことに気をつけましょう。
Google Fontsで配信されているフォントのライセンスは、次の2つに分けられます（例外としてUbuntuがあります）
OFL、Apacheライセンスともに、ライセンスを明示すれば、改変や再配布など自由に利用できます。サーバーにアップロードして公開する以上、再配布とみなされる可能性があります。また、フォントをダウンロードしwebフォント用にファイル形式を変更することは改変とみなされる可能性があります。これらの条件をチェックしておく必要があります。
オープンソースライセンスに関しては、原文と合わせて日本語参考訳が以下のサイトで閲覧できます。
まとめ
Next.jsのようなReactフレームワークではAutomatic Webfont Optimizationといったデフォルト（v10.2~）でwebフォントを最適化する機能が備えられていますが、開発プロジェクトによっては自分で最適化のための設定をしなくてはならない場合もあります。
今回はGatsby.jsにおいてFontsourceを用いたwebフォントのセルフホスティングについて紹介しました。注意すべきは、このような方法はwebページのパフォーマンスを向上させるための手段に過ぎません。実際は、Lighthouseのようなパフォーマンス計測ツール等を用いて、レンダーブロックが発生している時間や総合的なスコアを見て判断しましょう。
参考記事
ちょっと株式会社（chot-inc.com）のエンジニアブログです。 フロントエンドエンジニア募集中！ カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion