こんにちは！フロントエンド・アーキテクチャの現場を長年歩んできた者です。
Webサイトを作っていて、「おしゃれなフォントを読み込ませたら、なんだか表示されるまでの間テキストが消えてしまって焦った」「ページを開いた瞬間に文字がカクッと別の形に変わってびっくりした」そんな経験はありませんか？
「自分のコードの書き方が悪いのかな……」と不安になるかもしれませんが、大丈夫です。安心してください。それはあなたのせいではなく、Webブラウザが一生懸命「文字をどう画面に映すべきか」葛藤しているからなんです。
今回は、このWebフォントとブラウザの切っても切れない関係、そして私たちがそれをどうコントロールできるのかについて、身近な例えを交えながら優しく紐解いていきましょう。
—
1. Webブラウザは「せっかちさん」だけど「慎重派」
まず、ブラウザが画面を表示する仕組みを少しだけ覗いてみましょう。
ブラウザは優秀ですが、基本的に「せっかち」です。ユーザーがURLを入力したら、1秒でも早く画面を描こうとHTMLを読み込み、ツリー構造（DOM）を作っていきます。
ここで「おしゃれなWebフォントを使いたい！」とCSSで指定しているとしますよね。
ブラウザはHTMLを読んでいく途中で「あ、このテキストには特別なフォントが必要なんだな」と気づきます。そこで、インターネットの向こうにあるフォントファイル（WOFF2ファイルなど）を慌ててダウンロードしに行きます。
さて、ここで問題が発生します。
「フォントのダウンロードが終わる前に、今あるテキストを画面に出しちゃう？ それとも、フォントが届くまで文字を隠して待ってあげる？」
このブラウザの選択によって起こる現象が、Web制作の世界でよく耳にする「FOIT」と「FOUT」です。
—
2. 文字が消える恐怖「FOIT」と、文字が入れ替わる現象「FOUT」
これらを分かりやすくするために、「手紙の宛名書き」に例えてみましょう。
パターンA：FOIT（Flash of Invisible Text）＝「インクが届くまでペンを置く」
- ブラウザの行動: 「ちゃんとした専用フォントで書かないと失礼だ！」と真面目な性格を発揮します。フォントファイルがダウンロードされるまでの数秒間、テキストの文字自体を透明にして隠してしまいます。
- ユーザーから見える景色: ページが開いたのに、肝心の文字の場所がぽっかり空白になっています。「あれ、バグったかな？」とユーザーが不安になる瞬間です。これがFOITです。
パターンB：FOUT（Flash of Unstyled Text）＝「とりあえずあり合わせのペンで書き、後で書き直す」
- ブラウザの行動: 「待たせるくらいなら、今ある普通のフォント（ゴシック体や明朝体など）でとりあえず書いとけ！」と表示します。その後、おしゃれなフォントのダウンロードが終わった瞬間、「お待たせ！」と文字のフォントがパッと切り替わります。
- ユーザーから見える景色: 読み込みの瞬間に、文字が「ガクッ」と別の形に変形したり、レイアウトがわずかにズレたりします。「うわ、今の動きなんだかカッコ悪いな……」と感じる現象、これがFOUTです。
どちらも、ユーザー体験（UX）の観点からはちょっとモヤっとしてしまうポイントですよね。
—
3. 救世主 `font-display` でブラウザをコントロールしよう
「じゃあ、ブラウザの勝手にさせとくしかないの？」いいえ、違います。
私たちWebの作り手が、CSSの `font-display` というプロパティを使って、ブラウザに「こういう方針でフォントを扱ってね！」と優しい指示書を出してあげることができるんです。
実際のコード（@font-rule）の中で、どのように書くのか見てみましょう。
/ Webフォントを読み込むときの基本のルール設定 /
@font-face {
font-family: ‘MyFavoriteFont’; / フォントに名前をつける /
src: url(‘my-favorite-font.woff2’) format(‘woff2’); / フォントファイルのありか /
/ ここが今回の主役！ブラウザへの指示書です /
font-display: swap;
}
この `font-display` にはいくつか種類があります。代表的なものを、私たちの生活に置き換えて見てみましょう。
① `font-display: swap;` （おすすめ：とりあえず見せて、後で差し替える）
- 例え: レストランで「お水はすぐお持ちしますね！」と水道水（システムフォント）を出し、後から注文した「こだわりのお茶（Webフォント）」が届いたらスッと差し替えるおもてなし。
- メリット: ユーザーは文字が消えるイライラ（FOIT）から解放され、すぐに文章を読むことができます。実務でも非常によく使われる手堅い選択肢です。
② `font-display: block;` （注意：表示まで徹底的に隠す）
- 例え: 「最高の状態でお出ししたいので、料理が完成するまで絶対に目隠しをしてお待ちください！」という頑固なシェフ。
- デメリット: フォントの読み込みが遅い通信環境だと、数秒間テキストが完全に消えたままになります。ブランドのロゴなど、どうしても「特定のフォント以外で絶対に表示したくない」特別な理由がある場合を除いて、本文にはあまりおすすめしません。
③ `font-display: fallback;` （絶妙なバランス型）
- 例え: 「もし数秒で届かなければ、今日は諦めて今あるものでいこう！」という現実的な判断。
- 動き: ほんの短い間だけ文字を隠しますが、すぐに諦めてシステムフォントを表示します。その後、もしフォントのダウンロードが間に合えば次回から適用されます。
—
4. 実務で迷ったらどうする？ 現場からのアドバイス
初学者のうちは、「どの設定にすれば正解なんだろう？」と悩んでしまうかもしれません。でも、難しく考えすぎなくて大丈夫です。
基本の考え方として、「ユーザーに一刻も早く情報を届けること（コンテンツファースト）」を最優先に考えてみてください。
もし迷ったら、まずは以下の設定をCSSに組み込んでみることをおすすめします。
@font-face {
font-family: ‘Kosugi Maru’; / 例：丸ゴシックなどのWebフォント /
src: url(‘kosugi-maru.woff2’) format(‘woff2’);
font-weight: 400;
font-style: normal;
/ ユーザーを待たせないために ‘swap’ を選ぶのが現代のWeb制作の優しさです /
font-display: swap;
}
/ 実際に適用するセレクタ /
body {
font-family: ‘Kosugi Maru’, sans-serif; / Webフォントが読み込めないときの保険（フォールバック）も忘れずに！ /
}
ここで大切なポイントがもう一つ。Webフォントを指定するときは、必ず後ろに `sans-serif` や `serif` といった「システムの標準フォント（フォールバックフォント）」を書き添えておくこと。これは、万が一インターネットの回線が切れていたり、フォントファイルの読み込みに失敗したときの「最後の安全ネット」になります。
—
おわりに
Webフォントの読み込みやレンダリングの仕組みは、一見すると難解な技術用語が並んでいて尻込みしてしまいがちです。でも、裏側で動いているのは「どうすればユーザーにストレスなく気持ちよくサイトを見てもらえるか」を一生懸命考えているブラウザたちのドラマです。
`font-display: swap;` のような小さな設定一つで、ユーザーのイライラをスッと解消してあげることができます。ぜひ次の制作から、ブラウザへの「優しい指示書」を書いてみてくださいね。あなたのサイトが、より心地よい空間になるはずですよ！
コメント