Webフォントの「チラつき」と決別！`font-display`で心地よい読み込み体験を作ろう
Webサイトを作っていて、「おしゃれなフォントを適用したのに、読み込みの瞬間にパッと別のフォントが一瞬表示されてガクッとレイアウトがズレる……」なんて経験はありませんか？
あれ、なんだかお買い物をしていて、レジでお会計をしようとした瞬間に店員さんが入れ替わって「すみません、今交代の時間でして……」と待たされるような、あの微妙な居心地の悪さがありますよね。
実は、Webフォントの世界でも同じような現象が起きています。今回は、そんな「チラつき」をスマートに解決する魔法のプロパティ、`font-display`について、難しい専門用語は抜きにして紐解いていきましょう。大丈夫、少しのコードで劇的に読み心地が変わりますよ！
—
なぜ「チラつき」は起きるの？
Webフォントは、インターネットの回線を通じて「フォントのデータ」をわざわざダウンロードしてきて表示しています。
1. FOIT (Flash of Invisible Text)：フォントが届くまで文字を隠す（空白の時間がある）
2. FOUT (Flash of Unstyled Text)：とりあえずデフォルトのフォントで表示し、届いたらパッと入れ替える（レイアウトがガタつく）
どちらも読者にとっては「読みづらいな」と感じる原因です。この「お行儀の悪い」読み込み方を、ブラウザに「こう振る舞ってね」と指示を出せるのが `font-display` なんです。
—
`font-display` の選び方：あなたのお店の「接客スタイル」
`@font-face` というCSSのルールの中に、このプロパティを書き加えるだけでOKです。代表的な3つの設定を、お店の接客に例えてみましょう。
1. `swap`：とにかく早く文字を届けたい！
「文字が読めないのが一番のストレス！」という場合に最適です。とりあえずデフォルトのフォントをパッと表示しておいて、Webフォントが届いたら即座に入れ替えます。
@font-face {
font-family: ‘MyOriginalFont’;
src: url(‘font.woff2’) format(‘woff2’);
/ とにかく文字を表示優先。フォントが届いたらすぐに切り替える設定 /
font-display: swap;
}
2. `fallback`：少しだけ待つ「気の利いた」接客
「少し待ってでも、美しいフォントで読んでほしい」という時に使います。0.1秒ほど待ってもフォントが来なければ一旦デフォルトで表示し、読み込みが完了したら入れ替えます。でも、しばらく時間が経ったら入れ替えは諦めます。
@font-face {
font-family: ‘MyOriginalFont’;
src: url(‘font.woff2’) format(‘woff2’);
/ ほんの一瞬だけ待って、ダメならデフォルト表示。表示後の切り替えは控えめに /
font-display: fallback;
}
3. `optional`：読み込み速度命！の「こだわり派」
「回線が遅いなら、無理にWebフォントを使わなくていいよ」という判断をブラウザに委ねる設定です。一度読み込まれればキャッシュされるので、2回目以降の訪問は確実にWebフォントになります。
@font-face {
font-family: ‘MyOriginalFont’;
src: url(‘font.woff2’) format(‘woff2’);
/ 回線状況が悪ければWebフォントは諦める。読み込みの速さを最優先する設定 /
font-display: optional;
}
—
結局、どれを選べばいいの？
迷ったら、まずは `swap` を試してみてください。現代のWeb制作において、読者に「情報をいち早く届ける」ことは、何よりも大切な配慮だからです。
もし、ブランドのロゴや、デザインの統一感が命のデザイン性の高いサイトなら、`optional` を使って「読み込みの速さ」と「美しさ」のバランスを調整するのがプロの選択です。
最後に：完璧を目指さなくても大丈夫
Webフォントの読み込みは、回線状況という「自分では制御できないこと」に左右されます。「絶対にチラつきをゼロにする」と意気込みすぎると疲れてしまいますよね。
でも、こうして `font-display` を適切に設定してあげるだけで、読者は「おっ、このサイトは読み込みがスムーズだな」と、無意識のうちに心地よさを感じてくれるはずです。
まずはご自身のCSSファイルを開いて、`@font-face` の中に `font-display: swap;` を一行書き加えてみてください。それだけで、あなたのサイトは昨日よりもずっと優しく、スマートな場所になるはずですよ！
わからないことがあれば、いつでもまた聞きに来てくださいね。あなたのWeb制作ライフを応援しています！
コメント