WordPressのフォントをカスタマイズする方法・Googleフォント導入手順

はじめに

「日本語フォントをNoto Sans JPに変えたい」「サイトのブランドに合ったフォントを使いたい」——WordPressでフォントをカスタマイズするには、Googleフォントの読み込み方法とCSSの適用方法を正しく理解することが重要です。

症状・原因

WordPressのデフォルトフォントはブラウザのシステムフォントに依存するため、サイトのデザインと合わない場合があります。Googleフォントを追加する際に@importをCSSに直接書くと、パフォーマンスが低下します。wp_enqueue_style()で適切に読み込むことが推奨されます。

解決手順

ステップ1：Googleフォントをwp_enqueue_styleで読み込む

// functions.php: Googleフォントを正しく読み込む
add_action( 'wp_enqueue_scripts', function() {
    // Noto Sans JP（日本語対応フォント）
    wp_enqueue_style(
        'google-fonts-noto-sans-jp',
        'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap',
        [],
        null // バージョン管理をGoogleに任せる
    );

    // 複数フォントをまとめて読み込む（1リクエストで効率化）
    wp_enqueue_style(
        'google-fonts-combined',
        'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap',
        [],
        null
    );
} );

/* CSSでフォントを適用 */
body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont,
                 'Hiragino Sans', 'Meiryo', sans-serif;
}

h1, h2, h3 {
    font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
}

ステップ2：theme.jsonでブロックテーマにフォントを設定する

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "name":       "Noto Sans JP",
          "slug":       "noto-sans-jp",
          "fontFamily": "'Noto Sans JP', sans-serif",
          "fontFace": [
            {
              "fontFamily":  "Noto Sans JP",
              "fontWeight":  "400",
              "fontStyle":   "normal",
              "fontDisplay": "swap",
              "src":         ["https://fonts.gstatic.com/s/notosansjp/..."]
            },
            {
              "fontFamily":  "Noto Sans JP",
              "fontWeight":  "700",
              "fontStyle":   "normal",
              "fontDisplay": "swap",
              "src":         ["https://fonts.gstatic.com/s/notosansjp/..."]
            }
          ]
        },
        {
          "name":       "システムフォント",
          "slug":       "system-font",
          "fontFamily": "-apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif"
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--noto-sans-jp)"
    }
  }
}

ステップ3：ローカルフォント（@font-face）を使用する

/* @font-face でローカルフォントを使用（Googleフォントの代替） */
@font-face {
    font-family: 'MyCustomFont';
    src: url('/wp-content/themes/my-theme/fonts/myfont-regular.woff2') format('woff2'),
         url('/wp-content/themes/my-theme/fonts/myfont-regular.woff')  format('woff');
    font-weight: 400;
    font-style:  normal;
    font-display: swap; /* レイアウトシフト軽減 */
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('/wp-content/themes/my-theme/fonts/myfont-bold.woff2') format('woff2'),
         url('/wp-content/themes/my-theme/fonts/myfont-bold.woff')  format('woff');
    font-weight: 700;
    font-style:  normal;
    font-display: swap;
}

// ローカルフォントCSSをPHPで読み込む
add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'my-custom-fonts',
        get_theme_file_uri( 'css/fonts.css' ),
        [],
        wp_get_theme()->get( 'Version' )
    );
} );

ステップ4：フォントのパフォーマンスを最適化する

// preconnectでGoogleフォントの接続を高速化
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 );

// フォントのpreloadで表示を高速化（使用するフォントファイルを直接指定）
add_action( 'wp_head', function() {
    $font_url = get_theme_file_uri( 'fonts/notosansjp-regular.woff2' );
    echo '<link rel="preload" href="' . esc_url( $font_url ) . '" as="font" type="font/woff2" crossorigin>' . "\n";
}, 2 );

/* font-display: swap でフォント読み込み中もテキスト表示 */
/* 読み込み前: システムフォントで表示 */
/* 読み込み後: カスタムフォントに切り替え */
/* → ユーザーが最初からテキストを読める */

body {
    /* フォールバックスタックを適切に設定 */
    font-family:
        'Noto Sans JP',        /* 第1候補: Googleフォント */
        -apple-system,          /* macOS/iOS */
        BlinkMacSystemFont,     /* Chrome on macOS */
        'Hiragino Sans',        /* macOS日本語 */
        'Hiragino Kaku Gothic ProN',
        'Meiryo',               /* Windows */
        sans-serif;             /* 最終フォールバック */
}

ステップ5：エディターにもフォントを反映させる

// ブロックエディターにGoogleフォントを読み込む
add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style(
        'google-fonts-editor',
        'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',
        [],
        null
    );
} );

// エディタースタイルでフォントを適用
add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'css/editor-style.css' );
} );

/* css/editor-style.css: エディター専用スタイル */
.editor-styles-wrapper {
    font-family: 'Noto Sans JP', sans-serif;
    font-size:   16px;
    line-height: 1.8;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
}

注意事項

• Googleフォントを@importでCSSに直接書くと、CSSのパースをブロックしてパフォーマンスが低下します。必ずwp_enqueue_style()でHTMLの内にタグとして出力してください。
• 日本語フォントファイルは非常に大きい（数MB）ため、読み込む文字ウェイト（400・700など）を必要最小限に抑えてください。不要なウェイトを削除するだけで大幅に高速化できます。
• GDPR等のプライバシー規制が厳しい地域向けサイトでは、GoogleフォントのURLが外部サービスとの通信を伴うため問題になる場合があります。その場合はフォントファイルをサーバーに設置してセルフホストしてください。

まとめ

WordPressのフォントカスタマイズは「wp_enqueue_style()でGoogleフォントを読み込み→preconnect/preloadで高速化→CSSでfont-familyを適用→font-display:swapでLCP改善→エディターにも反映」の流れで整備できます。関連記事：WordPressのCSSカスタマイズでデザインを変更する方法、WordPressのダークモードを実装する方法。