【入門編】フォント読み込みとFOIT/FOUT対策 – HTML実践ガイド

Webサイトを作っていて、ふとブラウザを更新したとき。一瞬だけ文字が消えたり、最初は普通のフォントで表示されていたのに、コンマ数秒後に急にシュッと別のフォントに切り替わったりしたことはありませんか？

「自分のコードが間違っているのかな？」と焦る必要はありません。それは、Web制作の世界では避けて通れない「フォント読み込み」のドラマなんです。

今回は、初心者の方が必ず一度は悩む「FOIT」と「FOUT」という現象の正体と、それをスマートに解決する魔法のCSSプロパティについて、一緒に紐解いていきましょう。

—

Webフォントを読み込む際、ブラウザは「Web上のどこかにあるフォントファイルをダウンロードして、画面に描画する」という作業を行います。しかし、インターネットの回線速度やサーバーの状況によって、このダウンロードには時間がかかることがあります。

その「待機時間」に起こるのが、以下の2つの現象です。

ブラウザが「Webフォントが届くまでは、何も表示しないでおこう」と判断した状態です。ユーザーから見ると、「サイトが開いたのに、肝心な文字が何も見えない！」という、ちょっと不安な状態ですね。

ブラウザが「とりあえず今あるシステムフォント（端末に入っている標準フォント）で表示しておいて、Webフォントが来たら差し替えよう」と判断した状態です。「文字が急にカクッと変わる」ので、レイアウトが少しガタつくことがあります。

—

この「見えない時間」や「急な切り替わり」をどうコントロールするか。そこで登場するのが、CSSの`@font-face`ルールの中で使う`font-display`というプロパティです。

これを使うと、読み込みのタイミングを「シェフのこだわり」のように細かく調整できるんです。

@font-face {
font-family: ‘MyWebFont’; / フォントの名前 /
src: url(‘myfont.woff2’) format(‘woff2’); / フォントの場所 /

/ ここが今回の主役！ /
font-display: swap;
}

一番のおすすめは `swap` です。
これは、「Webフォントが届くまでは、とりあえず今のフォントを表示して、届いたらすぐに入れ替えるよ！」という設定。FOIT（透明な文字）を避けて、ユーザーに情報をすぐに届けられるので、現代のWeb制作ではほぼ標準装備と言ってもいいでしょう。

—

HTMLで`span`や`strong`、`code`タグなどを使ってテキストを装飾する際、フォントの指定とセットで以下のように書くのがベストプラクティスです。

これは普通の文章です。ここだけ特別なフォントです！

バックアップフォントを忘れずに： `font-family: ‘MySpecialFont’, sans-serif;` と書くことで、万が一Webフォントが読み込めなくても、端末標準のきれいなフォントで表示されるようになります。これが「優しさ」の設計です。
FOIT/FOUTは完全には消せない： どんなに頑張っても、通信環境によって「読み込みのラグ」はゼロにはできません。だからこそ、`swap`を使って「ユーザーを待たせないこと」を優先するのが、Web制作の現場でのリアルな判断基準です。

—

「フォントが切り替わる瞬間がどうしても気になる…」という職人気質なあなたへ。安心してください。最近のブラウザは非常に賢くなっており、`font-display: swap` を指定するだけで、ほとんどのケースで違和感のない読み込み体験を提供できるようになっています。

まずは、自分のサイトに`font-display: swap`を一つ足すところから始めてみましょう。それだけで、あなたのサイトはぐっと「プロの仕事」に近づきます。

Web制作は、こうした小さな気遣いの積み重ねです。焦らず、一歩ずつ進んでいきましょうね！