フォント読み込みとFOIT/FOUT（font-displayの内部）

なぜ文字が消えたり後から差し替わるのか

Webフォント（@font-face で url() 指定したフォント）は、HTMLパースとは独立にネットワークから取得されます。問題は、テキストを描画しようとした瞬間にそのフォントがまだ届いていないことが普通に起きる点です。このときブラウザが取る選択は2つしかありません。フォントが来るまでテキストを描かないか、手元にある別フォント（フォールバック）でひとまず描いておくかです。前者が起きると文字が一瞬消える FOIT（Flash of Invisible Text）、後者だと後で本フォントに差し替わる FOUT（Flash of Unstyled Text）になります。

font-display 記述子は、この「どこまで待ち、いつ諦め、いつ差し替えるか」を制御する仕組みです。重要なのは、これが1つの状態機械を3つの時間区間で駆動しているだけで、auto から optional までの5値は区間の長さを変えたプリセットにすぎない、という構造です。フォント取得がレンダリングを遅らせる全体像は クリティカルレンダリングパスの最適化原理 も合わせて押さえてください。

3つの期間とフォントの可視状態

ブラウザはテキストの描画が要求された時点から、対象フォントについてブロック期間 → スワップ期間 → フォールバック期間という3区間を時間順に進みます。各区間でフォントが「不可視」「フォールバックで可視」「本フォントで可視」のどの状態を取るかが決まっています。

ポイントは2つです。第一に、ブロック期間中にフォントが届けば FOIT も FOUT も起きません。最初から本フォントで描けるため、これが理想です。第二に、フォールバック期間を過ぎてから届いたフォントは、もうそのテキストには適用されません（次に同じフォントを使う要素には使われます）。これは「いつまでも遅れて差し替わってチラつく」のを防ぐための打ち切りです。

描画要求 ──[ブロック期間]──[スワップ期間]──[フォールバック期間]──→ 以後フォールバック固定
            不可視で待つ      フォールバック表示    フォールバック表示
            （ここで届けば      （届けば即差し替え）   （届いても差し替えない）
              FOITなし）

font-displayの5値は期間長のプリセット

auto / block / swap / fallback / optional の違いは、上の3期間の長さの割り当てだけで説明できます。具体的な秒数は仕様では「短い（おおむね100ミリ秒程度）」「長くても3秒程度」と幅をもって定義され、実装で多少前後しますが、各値の設計意図は次の通り明確です。

• block：ブロック期間が長く、その後のスワップ期間は無限。最後まで本フォントを待つので見た目は崩れませんが、遅いと文字が長く消えます。ロゴやアイコンフォントなど「別フォントで出ると無意味」な用途向きです。
• swap：ブロック期間がほぼ0なので即フォールバック表示し、届いたら差し替えます。本文を速く読ませたいときの定番ですが、差し替え時にレイアウトが動けば CLS を出します。
• fallback：短いブロックで軽い FOIT を許し、その後は短いスワップ。遅延が大きいと差し替えを断念するため、チラつきの最大量を抑えられます。
• optional：スワップ期間が実質0。短いブロック中に間に合わなければそのページではフォールバックに固定し、本フォントは次回（キャッシュ済み）に回します。差し替え由来の CLS を構造的に出さない選択です。

CSS Font Loading APIとの関係

font-display は宣言的な制御ですが、同じ状態をスクリプトから観測・制御できるのが CSS Font Loading API です。document.fonts（FontFaceSet）は各フォントの読み込み状態を持ち、document.fonts.ready で全フォント確定を待てます。

// 本フォント確定後にだけ本文を表示する、といった明示制御ができる
document.fonts.ready.then(() => {
  document.documentElement.classList.add("fonts-loaded");
});

// 個別フォントを先に読み込み、完了後に自前でクラスを付け替える
const f = new FontFace("Inter", "url(/fonts/inter.woff2)");
f.load().then((loaded) => document.fonts.add(loaded));

この API を使うと、「フォント未確定の間は意図したフォールバックで描き、確定したらクラス切り替えで一括スワップ」という FOUT を制御下に置く手法が組めます。font-display が時間で自動遷移するのに対し、API は遷移の契機をアプリ側が握れるのが違いです。

差し替えで起きるCLSとsize-adjust整合

FOUT のスワップで体感品質を最も損なうのがレイアウトシフトです。フォールバックフォントと本フォントは、同じ font-size でも1文字の幅（アドバンス幅）や行の高さ（アセント／ディセント）が異なります。差し替えた瞬間に文字幅と行の高さが変わり、後続の行が上下にずれて CLS が加算されます。CLS の採点式そのものは Core Web Vitalsの計測アルゴリズム を参照してください。

根本対策は、フォールバックの寸法を本フォントへ合わせ込むことです。@font-face でフォールバック専用の別フェイスを定義し、次の4つの記述子でメトリクスを上書きします。

これらでフォールバックの行ボックス寸法を本フォントと一致させておけば、スワップが起きても1行の高さと折り返し位置が変わらず、レイアウトが動きません。つまり「FOUT は許すが CLS は出さない」状態を作れます。

/* 本フォント */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: swap;
}

/* 寸法を Inter に合わせたフォールバック専用フェイス */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;        /* Arial を Inter の字幅へ補正 */
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body {
  /* 本フォント未着の間は寸法整合済みフォールバックで描く */
  font-family: "Inter", "Inter Fallback", sans-serif;
}

取得そのものを速くする

期間制御や寸法整合は「間に合わなかったとき」の被害を抑える話です。そもそもブロック期間中に届けば FOIT も FOUT も起きないため、取得の前倒しが最上策になります。

• preload：<link rel="preload" as="font" type="font/woff2" crossorigin> で、CSS解析を待たずに最優先取得を開始させます。@font-face だけだと、CSSOM構築後にフォント取得が始まるため遅れます。リソース優先度の効かせ方は クリティカルレンダリングパスの最適化原理 を参照してください。
• crossorigin 必須：フォントは匿名 CORS で取得されるため、preload にも crossorigin を付けないと preload が別リクエスト扱いになり二重取得になります。
• WOFF2 とサブセット：圧縮率の高い WOFF2 を使い、使う字種だけにサブセット化すれば転送量が減り、ブロック期間内に収まりやすくなります。
• unicode-range 分割：字種ごとにファイルを分け、unicode-range で必要な範囲だけを取得させると、本文に使う範囲を最優先で届けられます。

まとめ