Webフォントの「一瞬の空白」を制する。`font-display`でUXを劇的に改善する実践ガイド
Web制作の現場で、クライアントやデザイナーから「Webフォントを導入したい」と要望されたとき、皆さんは何を懸念しますか？ 多くのエンジニアが真っ先に思い浮かべるのは、「読み込み中のカクつき」や「FOIT/FOUT問題」でしょう。
リッチなフォントを当てるのは簡単ですが、それを「ユーザー体験（UX）を損なわずに」実装するのがプロの仕事です。今回は、Webフォントの読み込み戦略の要である`font-display`プロパティについて、ブラウザの裏側の挙動を紐解きながら、現場で即戦力となる最適解を解説します。
—
なぜ、Webフォントは「一瞬の空白」を生むのか
まず、ブラウザがWebフォントを読み込む際の裏側の動きを理解しましょう。
1. フォントのDL開始: ブラウザがCSSを解析し、`@font-face`を見つける。
2. ブロッキング: フォントが降ってくるまで、ブラウザはそのフォントを使うテキストを「非表示（Invisible）」にするか、システムフォントで仮表示する。
このとき、「テキストが全く見えない状態（FOIT: Flash of Invisible Text）」や、「システムフォントからWebフォントへガクッと切り替わる瞬間（FOUT: Flash of Unstyled Text）」が発生します。これがユーザーに与えるストレスは計り知れません。
これを制御するのが、CSSの`font-display`プロパティです。
—
現場で選ぶべき「3つのカード」
`font-display`には主に3つの主要な値があります。それぞれの特性を理解し、プロジェクトの性格に合わせて使い分けるのが「デキるエンジニア」の流儀です。
1. `swap`：パフォーマンス重視の鉄板
「まずは読めることが最優先」。システムフォントで即座に表示し、フォントがDLでき次第、Webフォントに差し替えます。
- 適した用途: 本文、ブログ記事など、読みやすさが全てであるコンテンツ。
- 懸念点: 切り替わった瞬間にレイアウトシフト（ガクつき）が起こりやすい。
2. `fallback`：デザインとUXの妥協点
「数ミリ秒なら待たせるが、あとは諦める」。非常に短いブロッキング期間（100ms程度）のあと、システムフォントを表示します。フォントがDLできれば差し替えますが、DLが遅すぎるとそのままシステムフォントで突き通します。
- 適した用途: ブランドアイデンティティが重要なメイン見出しなど。
3. `optional`：迷ったらこれを選べ（究極のUX）
「DLが爆速なら使うが、遅いなら無理して使わない」。最初の表示でシステムフォントを使い、その間にフォントをバックグラウンドでDLします。次にページを訪れたときは確実にWebフォントがキャッシュされているため、UXが極めて滑らかです。
- 適した用途: ユーザーの回遊性が高いサイト、パフォーマンスを極限まで高めたいモダンなWebアプリ。
—
【実践】コピペで使える最強のCSS設計
実務では、単にプロパティを書くだけでなく、フォントのロード戦略を最適化する必要があります。以下のコードは、多くの現場で私が採用しているテンプレートです。
/
- 現場で使える font-display 設定のテンプレート
- 読み込み時間を最適化し、FOITを最小限に抑える
/
@font-face {
font-family: ‘MyCustomFont’;
src: url(‘/fonts/my-font.woff2’) format(‘woff2’);
font-weight: 400;
font-style: normal;
/
- swap: 読み込みが終わるまでシステムフォントで表示。
- レイアウトシフトが許容できる箇所には最も効果的。
/
font-display: swap;
}
@font-face {
font-family: ‘HeadingFont’;
src: url(‘/fonts/heading.woff2’) format(‘woff2’);
font-weight: 700;
/
- optional: 表示速度を最優先。
- ネットワークが遅い環境でもユーザーを待たせない。
/
font-display: optional;
}
—
シニアエンジニアからのワンポイントアドバイス
最後に、現場の泥臭い話をひとつ。
`font-display: swap`を使うと、どうしてもWebフォントに切り替わった瞬間に「文字幅の違い」によるレイアウトシフト（ガクつき）が発生します。これを防ぐには、`size-adjust`や`ascent-override`といったCSSフォント記述子を併用するのが現代のベストプラクティスです。
システムフォントとWebフォントの「見た目のサイズ差」をCSS側で計算して埋めることで、切り替わりの瞬間をユーザーに気づかせないほど滑らかに繋ぐことができます。
「フォントを当てる」ことだけで満足せず、「ユーザーが文字を読み始める瞬間」の体験までデザインすること。それが、ただのコーダーと、選ばれるフロントエンドエンジニアの境界線です。
ぜひ、次回のプロジェクトで試してみてください。コードの質が、確実に一段階上がりますよ。
コメント