【実務・中級編】font-displayプロパティとインラインテキストの表示タイミング – HTML実践ガイド

Webフォントの「チラつき」にサヨナラを。font-displayで制御するフォントレンダリングの最前線

フロントエンド開発の現場で、一度は頭を悩ませたことがあるはずです。ページを読み込んだ瞬間、テキストが数秒間消えたり、あるいは明朝体からゴシック体へガクッと入れ替わったりするあの現象。

これらはFOIT (Flash of Invisible Text) や FOUT (Flash of Unstyled Text) と呼ばれ、ユーザー体験を損なう「フォント読み込みの過渡期」に発生する問題です。特に最近のモダンなWebデザインでは、Webフォントの選定がブランドイメージに直結するため、これらをいかにスマートに制御するかが、シニアエンジニアの腕の見せ所でもあります。

今回は、CSSの `font-display` プロパティを活用し、インラインテキストの表示タイミングを最適化する戦略について深掘りしていきましょう。

—

1. ブラウザが裏側で行っていること：フォントのライフサイクル

ブラウザがWebフォントを読み込む際、内部では以下の3つの期間を管理しています。

1. フォントブロック期間 (Font Block Period): フォントが読み込まれていない間、テキストを非表示にする期間。
2. フォントスワップ期間 (Font Swap Period): フォントが読み込まれていない間、フォールバックフォント（システムフォント）を表示する期間。
3. フォント失敗期間 (Font Failure Period): フォント読み込みに失敗した場合、デフォルトのフォントを使い続ける期間。

`font-display` は、これらの期間をどのように扱うかを指示するためのディレクティブです。これを適切に設定しないと、ネットワーク環境が悪いユーザーには「文字が全く表示されない」という致命的な体験を与えてしまうことになります。

—

2. 実務で選ぶべきベストプラクティス：`swap` か `fallback` か

実務における結論から言うと、多くの場合 `font-display: swap;` が最適解です。

`swap` を指定すると、ブラウザは「フォントが読み込まれるまで待たず、すぐにフォールバックフォントを表示し、読み込み完了後にWebフォントへ切り替える」という挙動をとります。これにより、FOITを完全に回避できます。

もし、Webフォントの読み込みに時間がかかりすぎる場合に、レイアウトのガタつきを最小限に抑えたい場合は `fallback` も有効です。これは、非常に短いブロック期間（約100ms）を設けた後、読み込みが遅ければフォールバックフォントに切り替え、その後もバックグラウンドで読み込みを継続し、キャッシュされた次回のアクセスからWebフォントを適用する挙動です。

—

3. そのまま使える！実践的な実装サンプル

以下は、`@font-face` 定義の際、実務で迷わず使える推奨設定です。

推奨設定: font-display: swap;
FOITを徹底的に排除し、ファーストビューの表示速度を優先する。

/
@font-face {
font-family: ‘Inter-Variable’;
src: url(‘/fonts/inter-variable.woff2’) format(‘woff2’);
font-weight: 400 700;
font-style: normal;
/

swap: 読み込み完了までシステムフォントを使い、準備ができ次第切り替える。
インライン要素（span, strong等）でのレイアウト崩れを防ぐため、
次章の調整も併せて行うのがプロの作法です。

/
font-display: swap;
}

応用: フォント切り替え時のチラつき（レイアウトシフト）を軽減するテクニック
フォールバックフォントにサイズ調整を加えておくことで、
Webフォント適用前後のギャップを最小化します。

/
.text-optimized {
font-family: ‘Inter-Variable’, sans-serif;
/

size-adjustプロパティを併用して、
システムフォントとWebフォントの文字サイズ感を揃えるのが現代の定石。

/
size-adjust: 100%;
}

—

4. 現場で「なるほど！」と言われる調整術

`font-display: swap;` を使うと、どうしても「フォントの切り替わり」が目視で確認できてしまうことがあります。これを防ぐためには、単にプロパティを設定するだけでなく、以下の工夫を組み合わせるのがシニアの流儀です。

Font Loading APIの活用: JavaScriptでフォントの読み込み完了を検知し、ロードが完了したタイミングでクラスを付与する。これにより、いきなりフォントが変わるのではなく、滑らかなフェードインアニメーションを付与することが可能です。
`size-adjust` の導入: Google FontsなどでWebフォントを読み込む際、`size-adjust` プロパティ（`@font-face` 内で記述可能）を使って、代替フォントとWebフォントの行間や字面をピクセル単位で微調整してください。これが設定されているだけで、ユーザーは「読み込みが切り替わったこと」にすら気づきません。

まとめ

`font-display` はただのプロパティではなく、「ユーザーにいつテキストを見せるか」というUXの設計図です。

迷ったらまず `swap` を指定する。
読み込みのチラつきが気になるなら `size-adjust` でフォントのサイズ感（メトリクス）を揃える。
最終的には、Webフォントそのものを小さくする（サブセット化する）努力も忘れない。

この小さな調整の積み重ねが、あなたのサイトを「速い」と感じさせるための重要なピースになります。明日からのコーディングで、ぜひ意識して試してみてください。現場からは以上です！