2009年のWebフォント導入以来、ウェブデザインにおけるフォントの自由度は劇的に高まっています。Webフォントは主にCSSの@font-faceルールを使って利用され、システム標準のフォントである「Webセーフフォント」だけに縛られずに済むようになりました。そして、現在もGoogle Fontsを代表とするサービスが多数のフォントファイル形式を提供しています。

これまで、Webフォントを使用する際は太さ（ウエイト）やスタイルごとに別々のファイルを扱い、以下のように、使用時にフォントがどのように表示されるかを明確にする必要がありました。

Roboto-Italic.woff2
Lato-BoldItalic.woff2
OpenSans-SemiBold.ttf
WorkSans-ExtraBold.ttf

この方法では、各バリエーションを個々のファイルとして読み込むことでページが重くなり、HTTPリクエストが増え、デザイン作成時のフォント選びと適用が複雑になるというデメリットがありました。

バリアブルフォントとは

2016年にデジタルタイポグラフィの大きな進歩であるバリアブルフォント（可変フォントとも）が登場。Google、Apple、Adobe、Microsoftによって共同開発されたフォントで、すぐに主流になりました。

バリアブルフォントの際立った特徴として、以下の可変要素（axis）をすべてまたは一部を組み込むことができます。

axis CSSプロパティ
線の太さ font-weight
スタイル font-style: italic
傾斜 font-style: oblique
横幅 font-stretch
表示最適サイズ font-variations-setting

最も広く使われているファイル形式は.woff2（Web Open Font Format）です。2018年にW3C勧告となった非常に圧縮率の高い形式です。.ttfや.otfなどの形式もバリアブルフォントとして使用できますが、.woff2の方が効率的です。またモダンブラウザは全てバリアブルフォントに対応しています。

なお、多くの場合、バリアブルフォントはWebフォントの一種として扱われますが、今回はよりわかりやすく「Webフォント」と「バリアブルフォント」を区別します。

バリアブルフォントを使用するメリット

プロジェクトでバリアブルフォントを使用するメリットは以下の3点が挙げられます。

  1. パフォーマンスの向上：複数の別々のフォントファイル（標準、太字、斜体など）を呼び出す代わりに、1つのバリアブルフォントファイルを呼び出せばいいため、HTTPリクエストの数が減り、読み込み時間が短縮されます。
  2. デザインの柔軟性：きめ細かな制御が可能なため、font-weight: 500や600に固定される代わりに、532のようなカスタム値を設定できます。
  3. レスポンシブ対応：各種デバイスに対応するタイポグラフィを作成できます。例えば、font-weight: clamp()を使ってビューポート間で太さを調整すれば、静的なフォントファイルを使用した際に突然違和感が生じることがありません。

WordPressでバリアブルフォントを使用する方法

2022年11月にリリースされたWordPress 6.1では、theme.jsonシステムにバリアブルフォントのサポートが追加されました。Twenty Twenty-Threeは、最初のバリアブルフォント対応テーマです。

バリアブルフォントを使ったテーマのカスタマイズ

Twenty Twenty-Fiveの子テーマで作業する場合、親テーマと子テーマの両方のスタイルをエンキューすることから始めます。

エディターとフロントエンドの両方でカスタムフォントが一貫して表示されるように、必要な@font-face宣言を含むfonts.cssファイルもエンキューします。

<?php
// 親スタイルと子スタイルをエンキュー
add_action('wp_enqueue_scripts', function() {
   wp_enqueue_style(
       'parent-style',
       get_template_directory_uri() . '/style.css'
   );

   wp_enqueue_style(
       'child-style',
       get_stylesheet_uri(),
       array('parent-style'),
       wp_get_theme()->get('Version')
   );

   // カスタムフォントをエンキュー
   wp_enqueue_style(
       'child-fonts',
       get_stylesheet_directory_uri() . '/fonts.css',
       array(),
       wp_get_theme()->get('Version')
   );
});

なお、スクリプトのエンキュー方法はテーマによって異なります。

子テーマが適切にセットアップされていることを確認するには、styles.cssで以下のテストを実行します。

body { background: #0000ff; }

theme.jsonでフォントを追加する

Twenty Twenty-Fiveには、デフォルトでManropeとFira Codeの2つのバリアブルフォントが組み込まれています。今回は例としてVollkornを追加し、太さ（ウエイト）600のデフォルトの見出しフォントに設定してみます。

theme.jsonは以下のようになります。

{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "typography": {
      "fontFamilies": [
        {
          "name": "Manrope",
          "slug": "manrope",
          "fontFamily": "Manrope, sans-serif",
          "fontFace": [
            {
              "fontFamily": "Manrope",
              "src": ["file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"],
              "fontWeight": "200 800",
              "fontStyle": "normal"
            }
          ]
        },
        {
          "name": "Fira Code",
          "slug": "fira-code",
          "fontFamily": ""Fira Code", monospace",
          "fontFace": [
            {
              "fontFamily": ""Fira Code"",
              "src": ["file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"],
              "fontWeight": "300 700",
              "fontStyle": "normal"
            }
          ]
        },
        {
          "name": "Vollkorn",
          "slug": "vollkorn",
          "fontFamily": "Vollkorn, serif",
          "fontFace": [
            {
              "fontFamily": "Vollkorn",
              "src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2"],
              "fontWeight": "400 900",
              "fontStyle": "normal"
            },
            {
              "fontFamily": "Vollkorn",
              "src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2"],
              "fontWeight": "400 900",
              "fontStyle": "italic"
            }
          ]
        }
      ],
      "customFontSize": true,
      "fluid": true
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var:preset|font-family|manrope"
    },
    "elements": {
      "heading": {
        "typography": {
          "fontFamily": "var:preset|font-family|vollkorn",
          "fontWeight": "600"
        }
      }
    }
  }
}

これでサイト全体にVollkornフォントが表示されるようになります。

WordPressフォントライブラリでVollkornが利用可能に
WordPressフォントライブラリでVollkornが利用可能に

なお、以下の点に注意してください。

  • Twenty Twenty-Fiveが更新され、ファイルへの新たなパスが追加された場合を想定して、ManropeとFiraのコードファイルを子テーマにコピーしておくことをお勧めします。
  • これらのフォントはすでに親テーマで登録されているため、コードが冗長に思えますが、子テーマで宣言することもお忘れなく。これにより、フォントライブラリUIに正しく表示され、親テーマが新しいファイルパスや変更で更新された場合にも継続して利用できます。
  • 上記は2つの異なるVollkornファイルを参照しています。

フォントを適切に読み込むには

CSSでフォントを宣言するまで、フロントエンドでフォントが正しく表示されないことがあります。以下は一般的なstyles.cssです。

/*
Theme Name: TT5 Child
Template: twentytwentyfive
Version: 1.0
*/

/* フォントが読み込まれ適用されていることを確認 */
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

code,
pre {
  font-family: 'Fira Code', 'Courier New', monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Vollkorn', 'Times New Roman', serif;
}

fonts.cssでは、@font-faceを使ってフォントファイルを宣言しています。これによりブラウザがどのフォントを読み込んで適用すべきかを理解できます。

重要なフォント（主要な見出しフォントなど）を事前に読み込みたい場合は、WordPressのフックを使ってサイトの<head>に<link rel="preload">を追加することも可能です。通常はfont-display: swapを使った@font-faceルールの方がパフォーマンスとユーザーエクスペリエンスの両方に優れています。

/* パフォーマンス向上のために重要なフォントを事前読み込み */
@font-face {
  font-family: 'Manrope';
  src: url('../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Code';
  src: url('../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

これにより、デフォルトで見出しフォントが太さが600のVollkornになるページが出来上がります。

WordPressエディターでデフォルトの見出しフォントとして設定したVollkorn
WordPressエディターでデフォルトの見出しフォントとして設定したVollkorn

また、必要であればstyles.cssに@font-faceのルールを含めて、fonts.cssファイルをエンキューする手間を省くことも可能です。

ユーザーによるフォントの太さ選びを簡素化

バリアブルフォント最大のメリットの1つは、フォントの太さに「400」や「600」ではなく、100から900の間で任意の値を使用できる点にあります。しかし、WordPressには独自の太さを選択するためのUIがありません。

これを解決するため、今回はFont Weight Optionsという簡単なプラグインを構築しています。「外観」＞「Font Weight」で本文、見出し、コードブロックの太さを定義することができます。

主要なロジックは以下のとおりです。

<?php
/**
 * Plugin Name: Font Weight Options
 */

class Font_Weight_Options {
    public function __construct() {
        add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
        add_action( 'wp_head', array( $this, 'apply_font_weights_frontend' ) );
    }

    public function add_admin_menu() {
        add_theme_page(
            __( 'Font Weight Settings', 'font-weight-options' ),
            __( 'Font Weight', 'font-weight-options' ),
            'manage_options',
            'font-weight-settings',
            array( $this, 'render_admin_page' )
        );
    }

    public function apply_font_weights_frontend() {
        $weights = get_option( 'fwo_font_weights', array(
            'body' => 400,
            'headings' => 600,
            'code' => 400,
        ) );

        echo "<style>
            body { font-weight: {$weights['body']} !important; }
            h1, h2, h3, h4, h5, h6 { font-weight: {$weights['headings']} !important; }
            code, pre { font-weight: {$weights['code']} !important; }
        </style>";
    }
}

new Font_Weight_Options();

上記は主要なロジックを示しています。プラグイン全体のソースコードはGitHub Gistでご覧いただけます。

ソースコード全体には以下が含まれています。

  • プラグイン起動時のデフォルト値
  • 数値フィールド（100〜900）を持つシンプルな管理者設定フォーム
  • 値を範囲内に保つバリデーション
  • ブロックエディターとフロントエンドの両方で太さの出力

これにより、WordPress管理画面に新たな設定ページが追加され、ユーザーが3種類のフォントの太さをきめ細かく設定できるようになります。

WordPress管理画面に追加された新たな設定ページでフォントの太さを選べるように
WordPress管理画面に追加された新たな設定ページでフォントの太さを選べるように

以下のように、ページエディターでもフロントエンドでも設定通りの太さでフォントが表示されます。

WordPress管理画面で設定した太さでフォントが表示される
WordPress管理画面で設定した太さでフォントが表示される

単一バリアブルフォントを追加するより簡単な方法

上記の工程が面倒に思える場合は、種類を問わずより簡単にテーマにフォントを追加する方法があります。

例えば、Google Fontsであればフォントライブラリから簡単に追加可能です（関連記事はこちら）。Google Fonts以外にも、適切なライセンスを持つオープンソースフォントは多数あります。以下、GitHubでAdobe FontのSourceSans3VF-Uprightを入手する例を見てみます。

エディターとフロントエンドで表示できるフォントとして使用するため、フォントファイルは子テーマの/assets/fontsフォルダに配置し、そこからfunctions.phpを作成します。

<?php
/**
 * 親テーマと子テーマのスタイルをキューに追加
 */
function twentytwentyfive_kinstachild_enqueue_styles() {
    // Parent theme style.
    wp_enqueue_style(
        'twentytwentyfive-style',
        get_parent_theme_file_uri( 'style.css' ),
        array(),
        wp_get_theme()->get( 'Version' )
    );

    // 子テーマのスタイル
    wp_enqueue_style(
        'twentytwentyfive-child-style',
        get_stylesheet_uri(),
        array( 'twentytwentyfive-style' ),
        wp_get_theme()->get( 'Version' )
    );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyfive_kinstachild_enqueue_styles' );

/**
 * 子テーマのスタイルをエディターでキューに追加
 */
add_action( 'after_setup_theme', function() {
    add_editor_style( 'style.css' );
} );

先の例と同様、theme.jsonファイルは親からManropeとFira Codeを参照する必要があります。これらを省略すると、テーマから削除されてしまいます。

{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "name": "Manrope",
          "slug": "manrope",
          "fontFamily": "Manrope, sans-serif",
          "fontFace": [
            {
              "src": [
                "file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
              ],
              "fontWeight": "100 900",
              "fontStyle": "normal",
              "fontFamily": "Manrope"
            }
          ]
        },
        {
          "name": "Fira Code",
          "slug": "fira-code",
          "fontFamily": ""Fira Code", monospace",
          "fontFace": [
            {
              "src": [
                "file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
              ],
              "fontWeight": "100 900",
              "fontStyle": "normal",
              "fontFamily": ""Fira Code""
            }
          ]
        },
        {
          "name": "Source Sans 3",
          "slug": "source-sans-3",
          "fontFamily": ""Source Sans 3", sans-serif",
          "fontFace": [
            {
              "src": [
                "file:./assets/fonts/SourceSans3VF-Upright.woff2"
              ],
              "fontWeight": "100 900",
              "fontStyle": "normal",
              "fontFamily": "Source Sans 3"
            }
          ]
        }
      ]
    }
  }
}

子テーマを使用していることをWordPressへの重要なメタデータを含めるには、基本的なstyles.cssファイルが必要になることもお忘れなく。

まとめ

今回ご紹介したいずれの方法を採用するにしても、WordPressのバリアブルフォントは、サイトのタイポグラフィ強化に役立ちます。パフォーマンスを改善し、複雑さを軽減して、従来の静的フォントでは不可能だったレスポンシブで柔軟なデザインを実現することができます。

なお、その可能性を最大限に引き出すには、可変要素（太さ、傾斜、最適サイズなど）を公開するカスタムUIを作成し、サイト所有者が管理できるように配慮する必要があります。

KinstaのWordPress専用マネージドクラウドサーバーでは、パフォーマンス重視のインフラストラクチャの恩恵を受けながら、バリアブルフォントを効率的かつ簡単に扱うことができます。

Bud Kraus

Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.