2026年5月20日

WordPressにカスタムフォントを読み込む方法

テーマ・デザイン

はじめに

WordPressでカスタムフォントを使う方法は複数ありますが、パフォーマンスとGDPR（個人情報保護）の観点から、フォントを自己ホストして wp_enqueue_style で読み込む方法が推奨されます。

症状・原因

Google FontsのURLをCSSに直書きしているがパフォーマンスが悪い
GDPR規制でGoogle Fontsの外部読み込みを避けたい
カスタムフォントが管理画面・エディターに反映されない
可変フォント（Variable Font）の使い方がわからない

解決手順

ステップ1：フォントを自己ホストする

Google Fontsのフォントをダウンロードして自己ホストします。

# google-webfonts-helper（https://gwfh.mranftl.com）でダウンロード
# ダウンロードしたフォントをテーマのfontsディレクトリに配置

ディレクトリ構成：

your-theme/
├── fonts/
│   ├── noto-sans-jp-v53-japanese-regular.woff2
│   ├── noto-sans-jp-v53-japanese-700.woff2
│   └── ...
└── style.css

ステップ2：CSSで@font-faceを定義する

/* css/fonts.css */

/* Noto Sans JP Regular */
@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 400;
    font-display: swap; /* レイアウトシフトを防ぐ */
    src: url('../fonts/noto-sans-jp-v53-japanese-regular.woff2') format('woff2');
    unicode-range: U+3000-9FFF, U+FF01-FF60, U+FFE0-FFE6; /* 日本語文字のみ */
}

/* Noto Sans JP Bold */
@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/noto-sans-jp-v53-japanese-700.woff2') format('woff2');
    unicode-range: U+3000-9FFF, U+FF01-FF60, U+FFE0-FFE6;
}

/* 可変フォントの場合 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900; /* 範囲指定 */
    font-display: swap;
    src: url('../fonts/inter-variable.woff2') format('woff2 supports variations'),
         url('../fonts/inter-variable.woff2') format('woff2');
}

ステップ3：functions.phpで読み込む

// functions.php
function mytheme_enqueue_fonts(): void {
    // 自己ホストフォント
    wp_enqueue_style(
        'mytheme-fonts',
        get_template_directory_uri() . '/css/fonts.css',
        [],
        '1.0.0'
    );

    // メインスタイルシート（fontsに依存）
    wp_enqueue_style(
        'mytheme-style',
        get_stylesheet_uri(),
        ['mytheme-fonts'], // 依存関係
        wp_get_theme()->get('Version')
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_fonts');

// エディターにも適用
function mytheme_enqueue_editor_fonts(): void {
    wp_enqueue_style(
        'mytheme-fonts',
        get_template_directory_uri() . '/css/fonts.css',
        [],
        '1.0.0'
    );
}
add_action('enqueue_block_editor_assets', 'mytheme_enqueue_editor_fonts');

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

// functions.php
function mytheme_preload_fonts(): void {
    $fonts = [
        get_template_directory_uri() . '/fonts/noto-sans-jp-v53-japanese-regular.woff2',
        get_template_directory_uri() . '/fonts/noto-sans-jp-v53-japanese-700.woff2',
    ];

    foreach ($fonts as $font_url) {
        echo '<link rel="preload" href="' . esc_url($font_url) . '" as="font" type="font/woff2" crossorigin>' . "\n";
    }
}
add_action('wp_head', 'mytheme_preload_fonts', 1);

ステップ5：theme.jsonでフォントを登録する（FSE対応）

{
    "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": ["file:./fonts/noto-sans-jp-regular.woff2"]
                        },
                        {
                            "fontFamily": "Noto Sans JP",
                            "fontWeight": "700",
                            "fontStyle": "normal",
                            "fontDisplay": "swap",
                            "src": ["file:./fonts/noto-sans-jp-700.woff2"]
                        }
                    ]
                }
            ]
        }
    }
}

注意事項

font-display: swap を指定するとFOUT（スタイルなしテキストの一時表示）が発生しますが、block より体感パフォーマンスが良いとされます
Google Fontsを外部から読み込む場合、EU在住ユーザーのIPアドレスがGoogleに送信されます。GDPR対応が必要なサイトでは自己ホストを検討してください
unicode-range で日本語文字のみに適用すると、英数字はシステムフォントを使うため読み込みが軽量になります

まとめ

フォントは @font-face で定義して wp_enqueue_style で読み込みます。font-display: swap + rel="preload" で表示を最適化し、FSEテーマでは theme.json の fontFamilies で管理します。GDPR対応のため、日本語フォントは自己ホストが推奨です。

Post Views: 13