2026年5月20日

WordPressのフォントを変更する方法

テーマ・デザイン

はじめに

WordPressのフォントはCSSとfunctions.phpで自由に変更できます。Google Fontsの読み込み・システムフォントスタック・ローカルWebフォントの3種類の方法と、ブロックテーマでのtheme.json設定を解説します。

症状・原因

サイトのフォントをゴシック体に統一したい
Google Fontsを読み込んでおしゃれなフォントを使いたい
フォントを変えたら表示が崩れた
theme.jsonでフォントを設定したい

解決手順

ステップ1：システムフォントスタックで高速表示

/* style.css — 外部読み込み不要、最速 */
body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        'Hiragino Sans',
        'Hiragino Kaku Gothic ProN',
        'Yu Gothic',
        YuGothic,
        Meiryo,
        sans-serif;
}

ステップ2：Google Fontsをfunctions.phpで読み込む

// functions.php
add_action('wp_enqueue_scripts', function(): void {
    // Noto Sans JP（日本語Webフォント）
    wp_enqueue_style(
        'google-fonts-noto',
        'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap',
        [],
        null
    );
});

/* style.css — Google Fontsを適用 */
body {
    font-family: 'Noto Sans JP', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
}

ステップ3：Google Fontsの読み込みを最適化する

// functions.php — preconnect + Google Fonts
add_action('wp_head', function(): void {
    echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "\n";
    echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "\n";
}, 1); // 優先度1で最初に出力

ステップ4：ローカルWebフォント（@font-face）

/* style.css — @font-face でローカルから読み込む */
@font-face {
    font-family: 'MyFont';
    src:
        url('/wp-content/themes/my-theme/fonts/myfont.woff2') format('woff2'),
        url('/wp-content/themes/my-theme/fonts/myfont.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* 読み込み中はフォールバックフォントを表示 */
}

body {
    font-family: 'MyFont', sans-serif;
}

ステップ5：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 700",
                            "fontStyle": "normal",
                            "src": ["file:./fonts/NotoSansJP-Variable.woff2"]
                        }
                    ]
                }
            ]
        }
    }
}

注意事項

Google Fontsの日本語フォント（Noto Sans JP等）はファイルサイズが大きく表示速度に影響します。display=swap を必ず付け、必要なウェイト（wght@400;700 など）のみ指定してください
wp_enqueue_style でフォントを読み込む際、バージョン引数に null を指定するとURLにクエリストリングが付きません。Google Fontsは null 推奨です
theme.json 5.9以降でフォントをローカルファイルから読み込む場合、fonts/ ディレクトリをテーマ内に配置し file:./fonts/filename.woff2 で参照します

まとめ

最速はシステムフォントスタック（CSS1行のみ）です。Google Fontsを使う場合は wp_enqueue_style + preconnect で読み込み最適化します。ブロックテーマは theme.json の settings.typography.fontFamilies でフォントを定義し、fontFace でローカルファイルを指定できます。

Post Views: 16