2026年7月12日

WordPressのCSS Variable Fontsを使う方法

テーマ・デザイン

はじめに

CSSのVariable Fontsは、Webページの見た目を一貫性と個別化を両立させるための新しい技術です。Variable Fontsを使用することで、フォントのウェイトや幅、スライドなどの特性を動的に変更できます。WordPressでこの機能を利用するには、テーマファイルに適切なCSSコードを追加する必要があります。

症状・背景

テーマ内で複数のウェイトやスタイルを持つ同一フォントを使用したい
フォントサイズがページ内のコンテキストにより変わるような柔軟性を持たせたい
ユーザー体験を向上させるために、より洗練されたデザインを実現したい

手順・設定方法

ステップ1: テーマ内でVariable Fontを定義する

# テーマディレクトリ内のstyle.cssファイルを開く
cd wp-content/themes/your-theme/
nano style.css

# @font-faceルールでVariable Fontを定義します。Google Fontsから始めるのが一般的です。
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');

/* 変数の宣言 */
:root {
    --body-font-weight: 400;
}

# ボディフォントウェイトを変数で指定します
body {
    font-family: 'Roboto', sans-serif;
    font-weight: var(--body-font-weight);
}

ステップ2: 動的なスタイル設定

# JavaScriptを使用して動的にCSS変数を変更できます。
nano wp-content/themes/your-theme/js/custom.js

// 以下はjQueryのスニペットです。カスタムJavaScriptファイル内で使用します。
$(document).ready(function() {
    // ページロード時に変数に値をセット
    document.documentElement.style.setProperty('--body-font-weight', '700');
});

ステップ3: 組み合わせと応用

# テーマ内の個別のセクションで異なるスタイルを使用できます。
nano wp-content/themes/your-theme/style.css

/* セレクターコンテキストに変数を適用 */
h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: var(--body-font-weight);
}

ステップ4: フォントの監視とトラブルシュート

# Google Fontsが正常に読み込まれているか確認するためのJavaScriptチェックを追加します。
nano wp-content/themes/your-theme/js/custom.js

// Google Fontsの読み込み完了後にスタイルを適用
document.addEventListener('DOMContentLoaded', (event) => {
    var bodyFontWeight = document.documentElement.style.getPropertyValue('--body-font-weight');
    if (!bodyFontWeight) {
        console.error("Body font weight variable is not defined.");
    } else {
        // 正常に読み込まれた場合の処理
        console.log('Body font weight set to:', bodyFontWeight);
    }
});

注意事項

セキュリティ上の注意: フォントを外部サーバーから取得する際は、その信頼性とセキュリティを確認してください。
パフォーマンス/運用上の注意: Variable Fontsの使用はキャッシュに影響を与える可能性があるため、適切なキャッシュ戦略を検討しましょう。

まとめ

1. Variable Fontの定義: @font-faceルールとCSS変数を使用して、テーマ内でVariable Fontをカスタマイズします。

2. 動的なスタイル設定: JavaScriptやjQueryを使用して、ページ内のコンテキストに基づいてスタイルを動的に変更できます。

3. 組み合わせと応用: カスタムセレクターで異なるフォントウェイトや幅を利用し、デザインの統一性を維持します。

4. 監視とトラブルシュート: フォントが正常に読み込まれているか確認し、問題があれば適切な対処を行います。

Post Views: 10