Google Fontsが読み込めず代替フォントになるときの対処

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のまま差し替えられるので、読み込み問題の試行錯誤もスムーズです。