【入門編】 font-displayとフォントレンダリング – Webブラウザの仕組み実践ガイド

こんにちは。Webブラウザという「巨大で気難しい魔法の箱」の内部構造を解き明かす旅へようこそ。

Webサイトを作っていると、たまにこんな現象に出くわしませんか？「ページを開いた瞬間、一瞬だけ文字が消えたり、別のフォントで表示されてからカクッと本来のフォントに入れ替わったりする」。

これ、実はブラウザが必死に頑張っている証拠なんです。今日は、このフォントの「お行儀」をコントロールする `font-display` という魔法の杖について、現場の知見を交えてお話ししますね。

—

想像してみてください。あなたは今、レストランでメニューを見ています。でも、そのメニューは「サーバーという遠い倉庫」から取り寄せる必要があって、手元に届くまで数秒かかる。その間、あなたは何も読めないでしょうか？

ブラウザも同じです。Webフォントを読み込んでいる最中、ブラウザは「本来のフォントが来るまで何も表示しない」のか、それとも「とりあえず手持ちのフォントで表示しておく」のかを迷います。この迷いを解決するのが `font-display` なんです。

—

`@font-face` という設定の中で、`font-display` には4つの性格（値）があります。それぞれの「振る舞い」を例えてみましょう。

「フォントがダウンロードされるまで、絶対に文字なんて表示しない！」と断固拒否するタイプです。

現場の現実: 低速な回線だと、ユーザーは数秒間「空白の画面」を見せられることになります。これはユーザー体験としては最悪に近いので、こだわりがない限りあまりおすすめしません。

「フォントが来るまでは、とりあえず手持ちのフォント（システムフォント）で表示しとこう。本物が来たらすぐに入れ替えるよ！」というタイプです。

現場の現実: 読者はすぐに文章を読み始められます。後でパッとフォントが切り替わる「チラつき」は発生しますが、「何も見えない」よりはずっとマシです。今のWeb開発のスタンダードですね。

「最初の100ミリ秒くらいは待つけど、それでも来なかったらとりあえず手持ちのフォントで表示するよ。フォントが来たら切り替えるけど、もしページ読み込みから時間が経ちすぎたら、もう切り替えないからね」というタイプ。

「フォントが爆速で来たら使うけど、ちょっとでも遅いならもう使わなくていいよ。手持ちのフォントで十分！」というタイプ。

—

では、`swap` を使った一番ポピュラーな書き方を見てみましょう。

@font-face {
/ フォントの名前 /
font-family: ‘MyCustomFont’;
/ フォントファイルの場所 /
src: url(‘/fonts/my-font.woff2’) format(‘woff2’);

/ ここが今日の主役です！ /
/ 「とりあえず表示して、後で入れ替える」設定 /
font-display: swap;
}

body {
/ まずはこれを使って、読み込み完了後にMyCustomFontに切り替わります /
font-family: ‘MyCustomFont’, sans-serif;
}

—

「`swap` を使うと文字がパッと切り替わる時に、レイアウトがズレてしまわないか心配……」

そう思うのは、あなたがとても丁寧な仕事をしている証拠です。その通り、フォントが変わると文字の幅が微妙に変わり、下の行がガタッと動くことがあります。これを「レイアウトシフト」と呼ぶのですが、防ぐコツはたった一つ。

「本来のフォントと、代わりのフォント（フォールバック）のサイズをCSSで微調整しておくこと」です。

`size-adjust` というCSSプロパティを使えば、代わりのフォントの大きさを微調整して、Webフォントと見た目を揃えることができます。これは少し上級テクニックですが、頭の片隅に置いておいてくださいね。

—

Webブラウザは、魔法使いではなく、実は「ユーザーにいかに早く情報を届けるか」を常に計算している算数好きの職人です。`font-display` を使いこなすことは、その職人に「どのタイミングで情報を出すのが一番親切か」を指示してあげることなんですよ。

最初は難しいかもしれませんが、大丈夫。まずは `font-display: swap` から試してみてください。それだけで、あなたのサイトはぐっと優しく、快適になります。

何か分からないことがあったら、いつでもまた聞きに来てくださいね。応援しています！