2026年5月20日

WordPressでGoogle Fontsを最適化して読み込む方法

テーマ・デザイン

はじめに

Google Fontsの無最適化な読み込みはLCP・CLSの悪化を招きます。preconnect・font-display: swap・必要なウェイトのみの指定・ローカルホスティングで表示速度を改善できます。

症状・原因

Google Fontsを使うとページの表示が遅くなった
PageSpeed InsightsでGoogle Fontsの警告が出る
フォント読み込み中にテキストが非表示になる（FOIT）
CLSスコアが悪化した

解決手順

ステップ1：必要なウェイトのみ指定する

// functions.php — 不要なウェイトを省く
add_action('wp_enqueue_scripts', function(): void {
    // NG: 全ウェイト読み込み（重い）
    // https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap

    // OK: 使うウェイトのみ（400と700のみ）
    wp_enqueue_style(
        'google-fonts',
        'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',
        [],
        null
    );
});

ステップ2：preconnect でDNS解決を先行させる

// functions.php — preconnect を wp_head の最初に出力
add_action('wp_head', function(): void {
    ?>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <?php
}, 1);

ステップ3：font-display: swap でFOITを防ぐ

URLに display=swap を付けると font-display: swap が適用されます：

https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap

| display値 | 挙動 |

|----------|-----|

| swap | フォールバックフォントを先に表示し、読み込み後に切り替え（CLS注意） |

| optional | 接続速度が速い場合のみ使用。遅い場合はフォールバックを維持（CLS最小） |

| block | フォント読み込みまでテキスト非表示（FOIT発生、非推奨） |

ステップ4：Google Fontsをローカルホスティングする（最速）

# google-webfonts-helper (https://gwfh.mranftl.com/) でフォントファイルをダウンロード
# woff2 + woff の2形式を取得

/* style.css */
@font-face {
    font-family: 'Noto Sans JP';
    font-style:  normal;
    font-weight: 400;
    font-display: optional; /* CLSを最小化 */
    src:
        local('Noto Sans JP'),
        url('/wp-content/themes/my-theme/fonts/noto-sans-jp-v53-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans JP';
    font-style:  normal;
    font-weight: 700;
    font-display: optional;
    src:
        local('Noto Sans JP Bold'),
        url('/wp-content/themes/my-theme/fonts/noto-sans-jp-v53-latin-700.woff2') format('woff2');
}

local() を先に指定することで、ユーザーのデバイスにフォントがインストール済みの場合はダウンロードをスキップできます。

ステップ5：テーマのGoogle Fonts読み込みを無効化してカスタムに置き換える

// functions.php — テーマのフォント読み込みを無効化
add_action('wp_enqueue_scripts', function(): void {
    // テーマが登録したGoogle Fontsを削除
    wp_dequeue_style('my-theme-fonts');
    wp_deregister_style('my-theme-fonts');

    // 最適化版を登録
    wp_enqueue_style(
        'optimized-fonts',
        get_template_directory_uri() . '/css/fonts.css',
        [],
        filemtime(get_template_directory() . '/css/fonts.css')
    );
}, 20);

注意事項

font-display: optional はCLSを最小化できますが、低速接続ではシステムフォントのままになります。フォントが必ず表示されることを重視する場合は swap を使用してください
Google Fontsのローカルホスティングは GDPR観点でも有利です。ユーザーのIPアドレスをGoogleに送信しなくて済みます
display=swap をURLに付けない場合、デフォルトは block（FOIT）になります。必ず display=swap または display=optional を指定してください

まとめ

Google Fonts最適化の優先順：①必要ウェイトのみ指定 → ②display=swap 追加 → ③preconnect タグを先頭に配置 → ④ローカルホスティングに移行（最終形）。ローカルホスティング + font-display: optional + local() の組み合わせでCore Web Vitalsを最大化できます。

Post Views: 14