---
title: "Google Fontsの読み込みで一瞬別フォントになる・ちらつくときの対処"
description: "Google Fontsの読み込み中に別フォントで表示されてから切り替わるちらつき（FOUTやFOIT）に悩む制作者向け。font-displayの設定と事前接続の工夫で体験を改善する手順を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/google-fonts-flash-swap"
markdown: "https://giga-site.com/articles/google-fonts-flash-swap/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Google Fontsの読み込みで一瞬別フォントになる・ちらつくときの対処

Google Fontsを使うと、読み込みが終わるまで文字が表示されなかったり、いったん別フォントで表示されてから切り替わる「ちらつき」が起きます。これはFOITとFOUTと呼ばれる現象で、font-displayの設定や事前接続の工夫で体感を改善できます。

> Source HTML: https://giga-site.com/articles/google-fonts-flash-swap
> Article index: https://giga-site.com/articles/index.md

## 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のまま差し替えれば、設定ごとのちらつきの違いを同条件で比べやすくなります。

## よくある質問

### 読み込み中に文字が消えるのを直したいです。

それはFOITと呼ばれる挙動です。font-displayをswapにすると代替フォントで先に表示され、本フォントが届いたら切り替わるため、読めない時間をなくせます。

### swapにすると今度は切り替えのちらつきが気になります。

ちらつきを最小化したい場合はoptionalが向きます。短時間で届かなければ本フォントを諦めるため切り替えが起きにくくなります。代替フォントの見た目を近づけるのも有効です。

### 日本語フォントの読み込みが特に遅いです。

日本語はファイルが大きいのが原因です。使用するウェイトや文字種を絞る、preconnectで事前接続するなどで読み込み時間を短縮できます。

### 自分の環境ではちらつきません。確認方法はありますか。

高速回線では目立たないことが多いです。開発者ツールで回線を絞ってシミュレーションするか、複数の端末や回線で実機確認すると現象を再現しやすくなります。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [Google Fontsが読み込めず代替フォントになるときの対処](https://giga-site.com/articles/google-fonts-blocked/index.md)
- [font-display: swapとは？Webフォント表示中の文字の出し方](https://giga-site.com/articles/what-is-font-display-swap/index.md)
- [Googleマップ埋め込みが表示されないときの対処](https://giga-site.com/articles/google-maps-embed-not-showing/index.md)
- [Googleアナリティクスのタグが発火しない・計測されないときの対処](https://giga-site.com/articles/google-analytics-not-tracking/index.md)
- [Googleタグマネージャー(GTM)が動かないときの確認点](https://giga-site.com/articles/google-tag-manager-not-firing/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Google Fontsの読み込みで一瞬別フォントになる・ちらつくときの対処",
  "description": "Google Fontsの読み込み中に別フォントで表示されてから切り替わるちらつき（FOUTやFOIT）に悩む制作者向け。font-displayの設定と事前接続の工夫で体験を改善する手順を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/google-fonts-flash-swap",
  "url": "https://giga-site.com/articles/google-fonts-flash-swap",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "読み込み中に文字が消えるのを直したいです。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "それはFOITと呼ばれる挙動です。font-displayをswapにすると代替フォントで先に表示され、本フォントが届いたら切り替わるため、読めない時間をなくせます。"
      }
    },
    {
      "@type": "Question",
      "name": "swapにすると今度は切り替えのちらつきが気になります。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ちらつきを最小化したい場合はoptionalが向きます。短時間で届かなければ本フォントを諦めるため切り替えが起きにくくなります。代替フォントの見た目を近づけるのも有効です。"
      }
    },
    {
      "@type": "Question",
      "name": "日本語フォントの読み込みが特に遅いです。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "日本語はファイルが大きいのが原因です。使用するウェイトや文字種を絞る、preconnectで事前接続するなどで読み込み時間を短縮できます。"
      }
    },
    {
      "@type": "Question",
      "name": "自分の環境ではちらつきません。確認方法はありますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "高速回線では目立たないことが多いです。開発者ツールで回線を絞ってシミュレーションするか、複数の端末や回線で実機確認すると現象を再現しやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```