はじめに
Google Fontsを設定したはずなのにサイトのフォントが変わらない、Noto Sans JPを読み込んでいるのにシステムフォントで表示される、フォントファイルが404エラーになっている。ウェブフォントの読み込み問題は原因が複数あるため、ネットワークタブで実際のリクエストを確認しながら対処します。
症状・原因
ウェブフォントが読み込まれない主な原因：
- エンキューの方法が間違い：
@importをCSSに直書きしているが優先度が低い - CSPヘッダーのブロック：
Content-Security-Policyでfonts.googleapis.comが許可されていない - Mixed Content：HTTPSサイトでHTTPのフォントURLを読み込んでいる
- キャッシュの問題：古いCSSキャッシュが残っていて新しいフォント設定が反映されない
- GDPR対応プラグイン：外部リソースの読み込みをブロックしているプラグイン
解決手順
ステップ1：ブラウザの開発者ツールで確認する
1. F12 → ネットワーク タブ → フォント でフィルタ
2. フォントファイルのリクエストが出ているか確認
3. ステータスコードが404・ERRの場合は読み込み元URLを確認
4. コンソール タブでCSPエラーが出ていないか確認
ステップ2：wp_enqueue_styleで正しくエンキューする
// functions.php — Google Fontsを正しくエンキュー
add_action('wp_enqueue_scripts', function() {
// Noto Sans JPの読み込み（preconnectで高速化）
wp_enqueue_style(
'google-fonts-preconnect',
'https://fonts.googleapis.com',
[],
null
);
wp_enqueue_style(
'noto-sans-jp',
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',
[],
null
);
});/* style.css — フォントを適用 */
body {
font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
}ステップ3：フォントをローカルにホストする（GDPR・高速化対応）
外部フォントサービスへの依存をなくし、プライバシーとパフォーマンスを改善します。
# google-webfonts-helperでフォントファイルをダウンロード
# https://gwfh.mranftl.com/ でNoto Sans JPを選択してダウンロード/* style.css — ローカルフォントとして定義 */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(''),
url('/wp-content/themes/your-theme/fonts/noto-sans-jp-v52-latin-regular.woff2') format('woff2'),
url('/wp-content/themes/your-theme/fonts/noto-sans-jp-v52-latin-regular.woff') format('woff');
}// functions.php — ローカルフォントをエンキュー
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style(
'local-fonts',
get_template_directory_uri() . '/style.css',
[],
wp_get_theme()->get('Version')
);
});ステップ4：CSPヘッダーを修正する
// functions.php — フォント読み込みを許可するCSP設定
add_action('send_headers', function() {
header("Content-Security-Policy: " .
"default-src 'self'; " .
"font-src 'self' https://fonts.gstatic.com; " .
"style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;"
);
});または.htaccessで設定：
<IfModule mod_headers.c>
Header always set Content-Security-Policy "font-src 'self' https://fonts.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com"
</IfModule>ステップ5：preconnectで読み込みを高速化する
// functions.php — preconnectヒントを追加
add_action('wp_head', function() {
echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "\n";
echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "\n";
}, 1);ステップ6：Adobe Fonts（Typekit）の場合
// functions.php — Adobe Fontsをエンキュー
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style(
'adobe-fonts',
'https://use.typekit.net/XXXXXXX.css', // KitのIDに変更
[],
null
);
});注意事項
- Google Fontsは2022年からGDPR違反の指摘を受けています。ヨーロッパ向けサイトはローカルホストが推奨です。
font-display: swapを設定するとフォント読み込み中にシステムフォントを表示し、読み込み後に切り替えます。
まとめ
ウェブフォントの問題はブラウザの開発者ツールのネットワークタブで原因を特定できます。CSPエラーが原因ならfont-srcに許可ドメインを追加し、パフォーマンスとプライバシーを重視する場合はローカルホストに切り替えましょう。関連記事：Mixed Contentエラーの解決方法、WordPressの表示速度改善