Webフォントの読み込み：font-display、プリロード、サブセット化
Webフォントの読み込み
Webフォントの読み込み：font-display、プリロード、サブセット化 | We.Inc
タイムラインのシミュレーターで各font-displayの値の挙動を確認し、プリロード、preconnect、unicode-rangeでのサブセット化、代替フォントの寸法合わせでレイアウトのずれを防ぎます。
フォントを速く読み込むコツは4つです。フォントの存在を早めにブラウザーへ伝える（preconnectかプリロード）、必要な文字だけを含む小さなWOFF2ファイルを送る、テキストに合ったfont-displayの値を選ぶ、そして何もずれないよう代替フォントのサイズを合わせることです。レイアウトのずれを避けることを最優先するならfont-display: optionalを使いましょう。
font-displayの値の早見表
- 値
- 読み込み中のテキスト
- フォントが遅れて届いたとき
- 向いている用途
- ほぼすぐに代替フォントで表示
- 必ず切り替わる
- すぐに表示すべき本文
- ほぼすぐに代替フォントで表示
- 切り替わらず、代替フォントのまま
- レイアウトのずれが最小
- ほぼすぐに代替フォントで表示
- 約3秒以内に届いた場合だけ切り替わる
- 中間的な選択
- 最大約3秒間は見えない
- 必ず切り替わる
- アイコンフォント、文字で組んだロゴ
- ブラウザーが決める
- ブラウザーが決める
- ブラウザーに任せる
フォントは、テキストを隠したりレイアウトを動かしたりしうる数少ないリソースの1つです。下のスライダーをドラッグしてフォントが届くまでの時間を設定し、各font-displayの値が各瞬間に何を表示するかを確認しましょう。そのうえで、ページを安定させる読み込みパターンをコピーしてください。
- 遅い回線でフォントのダウンロードにかかる時間にスライダーを合わせます。
- 各行を見ます。グレーは見えないテキスト、琥珀色は代替フォント、青はWebフォントです。
- どの値が遅れてフォントを切り替えるかに注目しましょう。遅れた切り替えのときに、表示中のテキストが再配置されます。
- プリロード、unicode-rangeによるサブセット、調整済みの代替フォントのコードをコピーします。
- 自分でホストするフォントは、@font-faceのルールをheadにインラインで書き、ブラウザーが別のスタイルシートを待たずに見つけられるようにしましょう。
- プリロードするのは重要なファイル1〜2個だけにしましょう。すべてのウェイトをプリロードすると、画像やスクリプトと帯域を奪い合います。
- 自分のドメインにあるファイルでも、フォントのプリロードには必ずcrossoriginを付けましょう。付けないとブラウザーがファイルを2回取得します。
- WOFF2で配信しましょう。WOFFより圧縮率が高く、現在のすべてのブラウザーが読み込めます。
- ダウンロードに失敗してもテキストが表示されるよう、すべてのフォント指定の最後に適切な汎用ファミリーを入れておきましょう。
よくある質問
font-display: swapは何をしますか？
フォントにごく短いブロック期間（CSS Fonts仕様では100ms以下を推奨）と無限のスワップ期間を与えます。テキストはほぼすぐに代替フォントで表示され、Webフォントの読み込みが終わった時点で切り替わります。
font-display: swapはCLSに悪影響がありますか？
ありえます。代替フォントとWebフォントで幅や行の高さが違うと、遅れた切り替えでテキストとその下のコンテンツが動きます。代替フォントにsize-adjustと、アセント、ディセント、行間の上書き指定を加えて解決するか、optionalを使いましょう。
プリロードしたフォントが2回ダウンロードされるのはなぜですか？
フォントは匿名のCORSモードで取得されるため、ファイルが同一オリジンにあってもプリロードのリンクにcrossorigin属性が必要です。ないとプリロードが実際のリクエストと一致せず、フォントがもう一度取得されます。
Google Fontsはプリロードすべきですか？
通常はすべきではありません。web.devによると、プリロードはunicode-rangeを含むブラウザー自身のコンテンツネゴシエーションの一部を迂回するため、ページで使わないサブセットを取得してしまうことがあります。代わりにfonts.googleapis.comとfonts.gstatic.comにpreconnectするか、自分でホストしたファイルをプリロードしましょう。
unicode-rangeでどうやって容量を節約できるのですか？
@font-faceのルールにunicode-rangeがあると、ブラウザーはページがその範囲の文字を1つ以上使う場合にだけファイルをダウンロードします。フォントをラテン文字、キリル文字、ギリシャ文字などのファイルに分ければ、訪問者はページで使われている文字体系のファイルだけを取得します。
フォント表示のタイムライン
- テキストにまだ届いていないフォントが必要なとき、ブラウザーは最大3つの期間を順に経ます。ブロック期間では、見えない代替フォントでテキストをレイアウトします。スワップ期間では代替フォントを表示し、フォントが届いたら切り替えます。その後は失敗期間で、代替フォントがずっと使われます。
- font-displayが変えるのは、最初の2つの期間の長さだけです。シミュレーターの数値はCSS Fonts Level 4草案の推奨値で、ブラウザーによってタイミングが少し異なることがあります。
遅れた切り替えがレイアウトのずれを起こす理由
- 見えないテキストでも、代替フォントで測った分の場所を占めます。本物のフォントに置き換わると各行の幅が広がったり狭まったりして、段落が折り返し直され、その下のすべてが動きます。この動きはCumulative Layout Shiftに数えられます。
- 対処法は2つです。optionalで遅れた切り替えそのものを避けるか、ローカルの代替フォント定義にsize-adjustと寸法の上書き記述子を使い、代替フォントがWebフォントと同じ場所を占めるようにします。
サブセット化
- 何千ものグリフを持つフォントは、100文字しか使わないページには無駄です。サブセット化ツールはアップロード前に使わない文字を取り除き、unicode-rangeを使えばブラウザーは不要なファイルを丸ごと省けます。
- 短い見出し用のテキストなら、Google Fonts APIはtext=パラメーターを受け付け、その文字だけを含むファイルを返します。装飾的な書体で組んだロゴや見出し1つに便利です。
プリロード付きの自己ホストフォント
最初の画面に必要な1ファイルだけをプリロード
as、type、crossoriginはすべて必要です。@font-faceのルールはheadにインラインで置き、すぐに見つかるようにします。
unicode-rangeでファイルを分割
1つのファミリーのラテン文字とキリル文字のサブセット
両方のルールは同じファミリー名を共有します。英語だけで書かれたページでは、キリル文字のファイルは一切ダウンロードされません。
サイズを合わせた代替フォント
レイアウトのずれを減らす調整済みのローカル代替フォント
数値は仮のものです。自分のフォントと代替フォントを比べて測り、両者がそろうまで調整してください。
preconnect付きのGoogle Fontsと、見出し1つ用のサブセット
2つ目のスタイルシートはロゴのテキストにある文字だけを要求するので、そのファイルはとても小さくなります。
- 短いブロック（推奨3秒）、無限のスワップ
- ごく短いブロック（100ms以下）、無限のスワップ
- ごく短いブロック、短いスワップ（推奨3秒）
- ごく短いブロック、スワップ期間なし
font-displayタイムラインシミュレーター
初期表示：フォントの読み込みに1.5秒かかります。スライダーをドラッグして変更できます。グレーは見えないテキスト、琥珀色は代替フォント、青はWebフォントです。
フォントは{n}秒後に到着
このページ表示ではWebフォントは使われません
目に見える切り替え：テキストが再配置される可能性あり
目に見える切り替えなし
目盛り：0〜5秒。optionalの場合、仕様ではブラウザーが遅れたダウンロードを中止するか、ごく低い優先度で完了させることを認めています。
仕様で推奨される期間
値
期間
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る