Google Fontsの読み込みで一瞬別フォントになる・ちらつくときの対処

FOITとFOUTの違いを理解する

Webフォントの表示挙動には主に二種類あります。フォント読み込み完了まで文字を出さないのがFOIT（Flash of Invisible Text）、先に代替フォントで表示してから本来のフォントへ切り替わるのがFOUT（Flash of Unstyled Text）です。

FOITは文字が一瞬消えるため「真っ白で何も読めない時間」が生まれます。FOUTは最初から読めますが、フォントが切り替わる瞬間にレイアウトや見た目が変化します。どちらも回線が遅いほど目立ちます。

どちらの挙動になるかは、CSSのfont-displayの指定で制御できます。まずは自分のサイトがどちらの状態かを把握しましょう。

font-displayの値を選ぶ

font-displayはフォント読み込み中の表示方針を決めるプロパティです。代表的な値はauto、block、swap、fallback、optionalで、それぞれ「文字を隠す時間」と「切り替えを許す時間」のバランスが異なります。

swapは代替フォントですぐ表示し、本フォントが届いたら切り替えます。読めない時間をなくしたいときに向きますが、切り替え時のちらつきは許容することになります。optionalは短時間で届かなければ本フォントを諦めるため、ちらつきを最小化したい場合に有効です。

Google FontsのURLにはdisplayパラメータを付けてfont-displayを指定できます。目的に応じて値を選ぶことが、体感改善の中心になります。

症状別チェック表

Google Fontsの読み込みで一瞬別フォントになる・ちらつくは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

事前接続とサブセットで読み込みを早める

フォント配信元への接続を前もって確立するpreconnectをhead内に置くと、DNS解決やTLSの待ち時間を短縮できます。Google Fontsの場合はフォント本体の配信ドメインへの事前接続が効果的です。

また、日本語フォントはファイルが大きいため読み込みに時間がかかります。使用する文字種やウェイトを必要なものに絞る、欧文だけならサブセットを限定するといった工夫で、ちらつきの発生時間そのものを減らせます。

ちらつきを抑える手順

次の順で見直すと改善しやすくなります。

1. 現状がFOITかFOUTかを低速回線のシミュレーションで確認する
2. font-displayの値を目的に合わせてswapやoptionalなどに変更する
3. フォント配信ドメインへのpreconnectをhead内に追加する
4. 不要なウェイトや文字種を読み込みから外して軽量化する
5. 代替フォントのメトリクスを近づけてレイアウトのずれを抑える

実機共有で見え方を確かめる

ちらつきは回線速度や端末によって体感が大きく変わるため、自分の高速環境だけでは判断しづらい現象です。実際の利用者に近い条件で確認できると、設定の良し悪しを判断しやすくなります。

ギガサイト便にフォント設定済みのHTMLをドロップすると共有URLが発行され、関係者がそれぞれの端末や回線で実際の表示を確認できます。font-displayを変えた版を同じURLのまま差し替えれば、設定ごとのちらつきの違いを同条件で比べやすくなります。