WebフォントのFOUT/FOITを完全攻略！表示遅延を防ぐ実践的最適化テクニック
Webサイトの魅力を大きく左右するWebフォントは、デザインの自由度を高める強力なツールです。しかし、その利用には「表示遅延」という課題がつきまといます。具体的には、FOUT（Flash of Unstyled Text）やFOIT（Flash of Invisible Text）といった現象が発生し、ユーザー体験を損ねてしまうことがあります。
この記事では、Webフォントの表示遅延を根本から解決するための実践的な最適化テクニックを、2026年のWeb開発の視点も踏まえながら、皆さんのWeb制作を応援する温かい気持ちでご紹介します。さあ、一緒にWebフォントの表示を快適にしていきましょう！
FOUT/FOITの基本理解と影響
まず、Webフォントの表示遅延でよく聞くFOUTとFOITについて、そのメカニズムとユーザーへの影響をしっかり理解しましょう。
FOUT (Flash of Unstyled Text) とは
FOUTは、「スタイルが適用されていないテキストの瞬間的な表示」を指します。Webフォントの読み込みが完了するまで、ブラウザは一時的にOSに標準搭載されている代替フォントでテキストを表示します。その後、Webフォントの読み込みが完了すると、そのWebフォントに切り替わるため、一瞬テキストの書体がガクッと変わって見えます。この視覚的な変化は、ユーザーに不快感を与える可能性があります。
FOIT (Flash of Invisible Text) とは
FOITは、「テキストが一時的に非表示になる現象」です。Webフォントの読み込みに時間がかかると、ブラウザがそのフォントが利用可能になるまでテキスト自体を非表示にする期間を設けることがあります。この間、ユーザーは空白のスペースを見ることになり、コンテンツの閲覧が妨げられるため、FOUT以上にユーザー体験を損ねる可能性があります。
これらの現象は、特にネットワーク環境が不安定なユーザーや、Webフォントのファイルサイズが大きい場合に顕著に現れます。Webサイトのパフォーマンスとユーザー体験を向上させるためには、これらの現象を効果的に防ぐことが不可欠です。
FOUT/FOITを防ぐ実践的最適化テクニック
それでは、FOUT/FOITを防ぎ、Webフォントをスムーズに表示させるための具体的なテクニックを見ていきましょう。これらの手法を組み合わせることで、より堅牢なWebフォント表示を実現できます。
1. font-display プロパティの活用
CSSの @font-face ルール内で指定できる font-display プロパティは、Webフォントの読み込み戦略をブラウザに指示するための非常に強力なツールです。
-
swap: FOUTを許容し、Webフォントが読み込まれるまで代替フォントを表示し続けます。最も一般的に推奨される設定で、コンテンツの即時性を優先します。 -
fallback: 短時間だけFOIT期間を設け、その後FOUTに切り替わります。Webフォントがすぐに読み込まれない場合は、代替フォントが表示されます。 -
optional: Webフォントの読み込みをバックグラウンドで行い、高速に読み込まれた場合のみWebフォントを適用します。そうでなければ代替フォントを使い続け、FOITやFOUTを完全に避けることができます。パフォーマンスを最優先する場合に有効です。 -
block: 短いFOIT期間の後にFOUT期間を設けます。これはデフォルトに近い挙動で、FOITやFOUTが発生しやすいです。
ほとんどの場合、font-display: swap; を使用することで、FOITを避けつつ、最終的にWebフォントを表示できるため、ユーザー体験とパフォーマンスのバランスが取れます。
エンジニアのスキルシェアプラットフォーム「DokuPro」
教えたい人と学びたい人を繋ぐDokuProでは、新規登録（先生・生徒）を募集中です。
詳細はこちら: https://dokupro.dev/