【テクニカル・上級編】フォント読み込みとFOIT/FOUT対策 – HTML実践ガイド

フォント読み込みの「深淵」——FOIT/FOUTを制し、レンダリングの静寂を実装する

Webパフォーマンスの最適化において、多くのエンジニアが「画像」や「JavaScriptのバンドルサイズ」に目を奪われる中、真の熟練者が最後に直面し、そして最も頭を悩ませるのが「タイポグラフィのレンダリング挙動」です。

特にインライン要素（``, ``, ``など）で構成されたテキストにおいて、Webフォントの読み込み遅延は単なる見た目の問題ではありません。それはブラウザのレンダリングパイプラインにおける「リフロー（再レイアウト）」を誘発し、ユーザー体験を物理的に破壊する深刻なバグとなり得るのです。

本稿では、ブラウザエンジンがどのようにフォントを解釈し、我々がそれをどう制御すべきか、アーキテクチャの観点から深掘りします。

—

1. FOITとFOUTのメカニズム：ブラウザとの静かな戦い

Webフォントが読み込まれる際、ブラウザには二つの選択肢があります。

FOIT (Flash of Invisible Text): フォントが読み込まれるまでテキストを一切表示しない（透明にする）。

FOUT (Flash of Unstyled Text): まずシステムフォントで描画し、フォント読み込み完了後に差し替える。

ChromeやSafariなどのモダンブラウザは、フォントファイルがダウンロードされるまで「不可視」を選択することが多いですが、これは「コンテンツがそこにない」という誤認をユーザーに与えます。一方、FOUTは表示速度こそ速いものの、フォントの切り替わり時に「レイアウトシフト（CLS）」を誘発し、読み込み中の文章がガタつくという別の悪夢を招きます。

これを根本から制御するのが `font-display` プロパティです。

—

2. font-displayによるレンダリング制御の最適解

CSSの `@font-face` における `font-display` は、単なる装飾の設定ではありません。レンダリングパイプラインへの介入権です。

@font-face {
font-family: ‘Inter’;
src: url(‘/fonts/inter.woff2’) format(‘woff2’);
/
swap: FOUTを許容する。最もパフォーマンスに寄与する。
fallback: 100ms程度の極めて短いFOITの後、システムフォントを表示し、
その後読み込みが完了すれば切り替える。
/
font-display: swap;
}

上級エンジニアとして考慮すべきは、「フォントが切り替わった瞬間のガタつき」をいかに最小化するかです。これには `size-adjust` や `ascent-override` を駆使して、システムフォントとWebフォントのメトリクスを強制的に一致させる設計が不可欠です。

—

3. TypeScriptと Font Loading API による高度な制御

単にCSSで定義するだけでは、非同期読み込みの競合やエッジケース（ネットワークが極端に遅い場合など）をハンドリングできません。`document.fonts`（CSS Font Loading API）を使い、TypeScriptで堅牢に制御します。

/

フォントの読み込み状態を監視し、アプリケーションの初期化を制御する

/
const ensureFontsLoaded = async (fontNames: string[]): Promise => {
try {
// 全てのフォントが使用可能になるまで待機
// Promise.allで並列実行し、ネットワークのレイテンシを効率的に処理
await Promise.all(
fontNames.map((name) => document.fonts.load(`1em ${name}`))
);
console.log(“フォントレンダリング準備完了”);
} catch (error) {
// フォント読み込み失敗時のフォールバック処理
// ここでフォントのロード失敗をログに送る設計が重要
console.error(“フォントの読み込みに失敗しました:”, error);
}
};

// 使用例
ensureFontsLoaded([‘Inter’, ‘Noto Sans JP’]);

このアプローチの利点は、フォントが準備できるまで描画を抑制したり、特定のクラスを `body` に付与してスタイルを動的に切り替えるといった「命令的」な制御が可能になる点です。

—

4. リフローとリペイントを最小化する戦略

インライン要素にフォントを適用する際、最も警戒すべきは「フォント切り替えによるテキストの幅変化」です。

1. フォントのサブセット化: 必要な文字セットだけに絞り込み、転送バイト数を極限まで減らす。
2. CSS Containment (`content-visibility`): 特定のインライン領域をレンダリングの境界として定義することで、フォントのロードに伴う影響範囲をDOMツリーの一部に限定する。
3. プリロード: `` を利用し、クリティカルなフォントをブラウザの優先度キューの最上位に置く。

避けるべきアンチパターン

JSによるCSSの動的注入: 実行時までスタイルが確定せず、レンダリングが遅延する原因になります。

重すぎるWebフォントを全ウェイト読み込む: ブラウザのメインスレッドを無駄に占有します。必要なウェイト（400, 700等）のみを指定してください。

—

結論：美しさと速度の両立は「エンジニアの矜持」

インラインテキストの表示は、Webというプラットフォームにおいて最も繊細な領域です。フォント読み込みの裏側にある非同期の競合や、メトリクスの差異によるリフローを理解し、それをコードで制御することこそ、フロントエンド・スペシャリストの真骨頂です。

「なんとなく読み込んでいる」という段階を卒業し、ブラウザの描画パイプラインを掌握する。その執念が、0.1秒のストレスもない、極上のUXを生み出すのです。

さあ、あなたのアプリケーションのフォント読み込み戦略を、もう一度見直してみませんか？