Webフォントの「あの待ち時間」を味方につける！`font-display`で心地よい体験をデザインしよう
Webサイトを見ているとき、一瞬だけ文字が消えたり、急にフォントが「ガクッ」と入れ替わったりする経験はありませんか？
実はあれ、ブラウザが一生懸命「Webフォント」というおしゃれな洋服を、あなたのサイトに着せようと頑張っている最中の姿なんです。今日は、この「フォント読み込みの裏側」と、それを魔法のように制御する`font-display`という仕組みについて、少しだけ深掘りしてみましょう。
—
なぜ「文字の表示」で迷いが生まれるのか？
Webフォントを読み込むとき、ブラウザは二つの究極の選択を迫られます。
1. 「おしゃれなフォントが届くまで、文字を隠して待つべきか？」（これを専門用語でFOIT: Flash of Invisible Textと言います）
2. 「とりあえず今ある文字（システムフォント）を表示して、後で差し替えるべきか？」（これをFOUT: Flash of Unstyled Textと言います）
どちらも一長一短です。文字が消えると「バグかな？」と不安になりますし、フォントが急に入れ替わると、レイアウトがガタガタと動いて読みにくくなってしまいますよね。
この「どう振る舞うか」をブラウザに指示する司令塔が、今回紹介する`font-display`です。
—
「お買い物」に例えてみると…
Webフォントの読み込みを、「ネットで注文した服が届くまでの間」に例えてみましょう。
- `block`（とにかく待て！）:
注文した服（Webフォント）が届くまで、裸（文字なし）で待機させます。服が届いたら一気に着替えます。「おしゃれさ」には妥協したくない派ですね。
- `swap`（とりあえず着る！）:
届くまでは今持っている服（システムフォント）を着ておきます。服が届いたら即座に着替えます。「まずは中身（情報）を伝えたい」という実用派です。
- `fallback`（ちょっとだけ待って、ダメなら諦める）:
一瞬だけ待って、届かなければ今ある服で我慢します。読み込みが遅いときは、潔く諦めるスタイルです。
現代のWeb開発では、`swap`が最も推奨されています。ユーザーは「文字が読めない時間」が一番ストレスを感じるからです。
—
実践！CSSでフォントを制御してみよう
では、実際にどう書くのか見てみましょう。`@font-face`という記述の中に、そっと一行書き加えるだけです。
@font-face {
font-family: ‘MyAwesomeFont’; / 好きな名前をつけます /
src: url(‘/fonts/my-font.woff2’) format(‘woff2’);
/ ここが魔法のスイッチ！ /
/ 「まずはシステムフォントで表示して、読み込み終わったら入れ替えてね」という指示 /
font-display: swap;
}
/ あとは普通に使うだけ /
body {
font-family: ‘MyAwesomeFont’, sans-serif;
}
たったこれだけで、ユーザーは「何も表示されない空白時間」から解放されます。
—
「レイアウトシフト」という最後の壁
`font-display: swap`を使うと、システムフォントからWebフォントに切り替わる瞬間、文字の太さや幅が微妙に違って「ガクッ」と行間が変わってしまうことがあります。これが「レイアウトシフト」です。
これを防ぐためのちょっとしたコツを伝授しますね。
- `size-adjust`を使う: CSSの`@font-face`には、読み込まれるフォントのサイズを微調整するプロパティがあります。システムフォントとWebフォントのサイズ感を揃えておくと、切り替わりの「ガクッ」をかなり抑えられます。
- プレロード（Preload）: 「このフォントは絶対使うぞ！」というものは、HTMLの``内で先に読み込みを予約しておきましょう。
—
最後に：完璧主義にならなくて大丈夫
Webブラウザのレンダリングは複雑で、通信速度やデバイスの性能によっても結果は変わります。「絶対にレイアウトを動かさない！」と完璧を求めすぎると、逆に開発が辛くなってしまいます。
まずは`font-display: swap`を試してみてください。それだけで、あなたのサイトは「読者に優しい、思いやりのあるWebサイト」に一歩近づきます。
ブラウザの仕組みを知ることは、ユーザーの「心地よさ」を設計することと一緒です。一つひとつの設定が、誰かの快適なブラウジングにつながっている。そう考えると、少しだけコーディングが楽しくなりませんか？
何か困ったことがあったら、いつでもまた聞きに来てくださいね。応援しています！
コメント