---
title: "Google Fontsが読み込めず代替フォントになるときの対処"
description: "デザイン指定の書体にならず標準フォントで表示されて困っているコーダー・デザイナー向け。Google Fontsの読み込み失敗にはlink記述ミス・ネットワーク制限・CSPブロックの三パターンがあり、どれか判断するための切り分け手順をまとめます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/google-fonts-blocked"
markdown: "https://giga-site.com/articles/google-fonts-blocked/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Google Fontsが読み込めず代替フォントになるときの対処

デザイン通りの書体にならず、なぜか標準フォントで表示される。Google Fontsが読み込めないと、ブラウザはフォールバックフォントに切り替えます。link記述・ネットワーク・CSPの三方向から原因を切り分け、確実に読み込む手順を整理します。

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

## Webフォント読み込みの仕組み

Google Fontsは、HTMLの link タグで配信元のCSSを読み込み、そのCSSが指すフォントファイル(woff2など)をブラウザがダウンロードして適用する仕組みです。link と font-family の指定が揃って初めて反映されます。

どこか一つでも失敗すると、ブラウザはCSSで指定したフォールバック(代替フォント)に切り替えます。これが「指定したのに違う書体になる」現象の正体です。

失敗しても多くの場合エラーで止まらず、見た目だけが変わるため、原因に気づきにくいのが特徴です。

## 代替フォントになる典型パターン

まず、link rel="stylesheet" のhref(配信元URL)が間違っている、または記述自体が欠けているケースです。配信元CSSが読めなければフォントは適用されません。

次に、ネットワーク環境による遮断です。社内ネットワークやオフライン環境、外部CDNをブロックする設定では、フォント配信元に到達できず代替に切り替わります。

そしてCSPです。HTMLにContent-Security-Policyが書かれていて font-src や style-src に配信元ドメインを許可していないと、ブラウザがフォント読み込みを拒否します。

## 症状別チェック表

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

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

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

## 原因を切り分ける手順

Networkタブとコンソールを見れば、どの段階で失敗しているかが分かります。

1. head の link rel="stylesheet" の配信元URL記述が正しいか確認する
2. 開発者ツールのNetworkタブで、フォントCSSとフォントファイルの取得が成功しているか確認する
3. 失敗していればステータス(404・ブロック・タイムアウト)で原因を推定する
4. ConsoleにCSP違反(font-src/style-src)が出ていないか確認する
5. 別ネットワーク(モバイル回線など)で読み込めるか試し、回線依存かを判定する
6. オフライン要件があるならフォントを自前ホスト(同梱)に切り替える

## CSPとネットワーク制約への対応

CSPが原因なら、配信元ドメインを style-src と font-src の許可リストに加えると読み込めるようになります。ただし許可は必要なドメインに限定し、むやみに広げないのが安全です。

閲覧者のネットワークが外部CDNをブロックする環境だと、制作側では解決できません。確実に同じ書体を見せたい場合は、フォントファイルをZIPに同梱して自前で配信する方法が堅実です。

フォールバック先のフォントをあらかじめ近い書体に指定しておけば、万一読み込めなくても崩れを最小化できます。

## 確認共有の場面での確実な見せ方

レビュー相手のネットワークやブラウザ設定によっては、外部フォントが読み込めず意図と違う見た目で届くことがあります。デザイン確認では書体の差が印象を左右するため、確実に同じ表示にしたいときはフォントの自前同梱が有効です。

ギガサイト便はCSS/JS/画像を含むZIPをドロップして共有でき、フォントファイルを同梱すれば外部CDNに依存せず同じ書体で見てもらえます。CSPやlink記述を直した版を同じURLのまま差し替えられるので、読み込み問題の試行錯誤もスムーズです。

## よくある質問

### Google Fontsが代替フォントになるのはなぜですか

link記述の誤り、ネットワークによる配信元の遮断、CSPでの不許可のいずれかで配信元やフォントファイルに到達できないと、ブラウザはCSSで指定したフォールバックフォントに切り替えます。

### エラーが出ていないのに書体が違います

フォント読み込みの失敗は多くの場合エラーで止まらず、見た目だけ変わります。Networkタブでフォントファイルの取得が成功しているか、Consoleにブロック警告がないかを確認してください。

### オフラインや社内ネットでも同じ書体にしたいです

外部CDNに依存しないよう、フォントファイルを自前で同梱して配信するのが確実です。ZIPにフォントを含めて共有すれば、ネットワーク制約のある環境でも同じ書体で表示できます。

### CSPでフォントをブロックされている場合は

ConsoleにCSP違反が出ていれば、配信元ドメインをstyle-srcとfont-srcの許可リストに加えると読み込めます。許可は必要なドメインだけに限定するのが安全です。

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

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

## 関連記事

- [Google Fontsの読み込みで一瞬別フォントになる・ちらつくときの対処](https://giga-site.com/articles/google-fonts-flash-swap/index.md)
- [環境によってフォントが別物に置き換わり見た目が変わるときの対処](https://giga-site.com/articles/font-fallback-different-look/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)
- [Mixed Content警告でhttpリソースがブロックされるときの対処](https://giga-site.com/articles/mixed-content-blocked/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Google Fontsが読み込めず代替フォントになるときの対処",
  "description": "デザイン指定の書体にならず標準フォントで表示されて困っているコーダー・デザイナー向け。Google Fontsの読み込み失敗にはlink記述ミス・ネットワーク制限・CSPブロックの三パターンがあり、どれか判断するための切り分け手順をまとめます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/google-fonts-blocked",
  "url": "https://giga-site.com/articles/google-fonts-blocked",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Google Fontsが代替フォントになるのはなぜですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "link記述の誤り、ネットワークによる配信元の遮断、CSPでの不許可のいずれかで配信元やフォントファイルに到達できないと、ブラウザはCSSで指定したフォールバックフォントに切り替えます。"
      }
    },
    {
      "@type": "Question",
      "name": "エラーが出ていないのに書体が違います",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "フォント読み込みの失敗は多くの場合エラーで止まらず、見た目だけ変わります。Networkタブでフォントファイルの取得が成功しているか、Consoleにブロック警告がないかを確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "オフラインや社内ネットでも同じ書体にしたいです",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "外部CDNに依存しないよう、フォントファイルを自前で同梱して配信するのが確実です。ZIPにフォントを含めて共有すれば、ネットワーク制約のある環境でも同じ書体で表示できます。"
      }
    },
    {
      "@type": "Question",
      "name": "CSPでフォントをブロックされている場合は",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ConsoleにCSP違反が出ていれば、配信元ドメインをstyle-srcとfont-srcの許可リストに加えると読み込めます。許可は必要なドメインだけに限定するのが安全です。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```