【フォントディスプレイ】

font-display とは？

最終更新: 2026年10月2日

💡 フォントを待つ間の文字表示を選ぶ

Webフォントの読み込みを待つ間の文字表示と、読み込み後の切り替えを指定する@font-face記述子。5つの値とレイアウトのずれへの対処を解説します。

📌 このページのポイント

上段はswapでの字形の切り替えの例、下段は@font-faceで指定する五つの方針の比較です。代替とWebフォントの組み合わせや通信条件で、改行・文字幅・ずれも確認します。

ひよこ

ページを開いたら、一瞬文字が見えないのはなぜ？

ペンギン先生

Webフォントを待つ間、ブラウザが文字を一時的に見えなくする場合がある。この現象をFOITと呼ぶよ。font-displayで待ち方を指定できる。

ひよこ

swapなら、どうなる？

ペンギン先生

非常に短い待機の後、代替フォントで文字を見せる。Webフォントが読み込めたら切り替える方針だ。ただし、文字幅や行の高さが変わると、レイアウトがずれることがある。

ひよこ

blockは読み込むまでずっと非表示？

ペンギン先生

違うよ。短い期間は見えない文字で待つけれど、間に合わなければ代替フォントを表示する。その後も読み込めたフォントへの切り替えを許す。無期限に文字を隠す指定ではないんだ。

ひよこ

fallbackやoptionalは？

ペンギン先生

fallbackは非常に短い非表示の期間と、限られた切り替え期間を使う。optionalは初期の表示に間に合わないフォントへ後から切り替えず、代替で表示を続ける方針だ。autoはブラウザが決める。

ひよこ

待ち時間は何秒と決まっている？

ペンギン先生

仕様には期間の長さの目安があるけれど、ブラウザの実装や利用者の設定で異なる。どの端末でも100ミリ秒や3秒ちょうど、と考えないほうがよい。

ひよこ

どれを選べばよいの？

ペンギン先生

早く文字を読めること、指定フォントの見た目、後からのずれをどう扱うかで選ぶ。swapもoptionalも万能ではない。実際のフォント、キャッシュの有無、通信条件で表示を確かめよう。

もっと詳しく知りたい人へ

size-adjustを105%にすれば、ずれがなくなる？

決まった値で解決するものではありません。size-adjustは字形やメトリクスを拡大縮小する記述子です。代替とWebフォントの組み合わせに合わせて調整し、文字幅、改行、行の高さを確認します。font-displayだけでページ全体のCLSが0になる保証もありません。

Google Fonts CSS APIの既定値はautoです。要求URLのdisplay=swapなどで指定します。固定の短い文字列だけならtext=で必要な文字を絞る方法もありますが、本文のように文字が変わる用途では不足が出ないようにします。

まとめ：ざっくりこれだけ覚えればOK！

「font-display」って出てきたら「Webフォントを待つ間の文字表示や切り替え方針を決める指定」と思えばだいたいOK！

📖 おまけ：英語の意味

「font-display」＝フォントの表示方針

💬 通常の要素に指定するCSSプロパティではなく、@font-faceのフォント定義で使う記述子です。