WordPressにカスタムフォントを読み込む方法（theme.json・@font-face・自己ホスト）

WordPress で独自のフォントを使う方法は、テーマの作り方によって変わります。

この記事の WordPress の関数とフックの動きは、WordPress 本体のソースコード（6.9）で確認しています。

フォントファイルを用意する

自分のサーバーに置く（自己ホストする）場合は、フォントファイルを WOFF2 形式で用意します。WOFF2 は圧縮されたWebフォントの形式で、現在の主なブラウザで使えます。

• Google Fonts で配布されているフォントの多くは、SIL Open Font License などのオープンなライセンスで、自分のサーバーに置いて配信できます。使う前に、フォントごとのライセンスを確認します。
• 有料フォントやパソコンに入っているフォントは、Webでの配信が許可されているとはかぎりません。購入したライセンスの条件を確認します。
• Google Fonts のフォントを WOFF2 と CSS の形でまとめて取得するには、google-webfonts-helper（gwfh.mranftl.com）のようなツールがあります。

この記事では、テーマの中に次のように置きます。ファイル名は例です。

my-theme/
├── assets/
│   ├── css/fonts.css
│   └── fonts/
│       ├── noto-sans-jp-400.woff2
│       ├── noto-sans-jp-700.woff2
│       └── inter-variable.woff2
├── functions.php
├── style.css
└── theme.json

日本語フォントは文字の数が多いため、英字だけのフォントよりファイルが大きくなります。使う太さ（ウェイト）を2つ程度に絞ると、読み込む量を減らせます。

方法1: theme.json の fontFace で登録する

ブロックテーマ（または theme.json を持つクラシックテーマ）では、theme.json の settings.typography.fontFamilies にフォントを登録します。fontFace を書くと、WordPress が @font-face の CSS を出力します。出力はサイトの表示側とブロックエディターの両方で行われるため、エディター用に別の設定は要りません。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "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:./assets/fonts/noto-sans-jp-400.woff2" ]
            },
            {
              "fontFamily": "Noto Sans JP",
              "fontWeight": "700",
              "fontStyle": "normal",
              "fontDisplay": "swap",
              "src": [ "file:./assets/fonts/noto-sans-jp-700.woff2" ]
            }
          ]
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--noto-sans-jp)"
    }
  }
}

• src の file:./ は、theme.json があるフォルダー（テーマのフォルダー）からの相対パスです。
• slug から --wp--preset--font-family--noto-sans-jp という CSS 変数が作られ、styles やブロックのタイポグラフィ設定で選べるようになります。
• 可変フォント（1つのファイルで太さを連続して変えられるフォント）は、"fontWeight": "100 900" のように範囲で書きます。

すでに theme.json がある場合は、fontFamilies の配列にこのフォントの項目を足します。保存後、サイトをブラウザの開発ツールで開き、「ネットワーク」タブで .woff2 が読み込まれているかを確かめます。

方法2: フォントライブラリでアップロードする（WordPress 6.5 以降）

WordPress 6.5 で、サイトエディターにフォントライブラリが追加されました。ブロックテーマでは、サイトエディターのスタイルの設定にあるタイポグラフィの画面から、フォントファイルのアップロードや、Google Fonts のフォントのインストールができます。

• フォントライブラリで追加したフォントのファイルは、標準では wp-content/uploads/fonts/ に保存され、自分のサーバーから配信されます。
• テーマのファイルではなくサイトのデータとして保存されるため、テーマを切り替えても残ります。

方法3: @font-face の CSS を読み込む（クラシックテーマ）

theme.json を使わないクラシックテーマでは、@font-face を書いた CSS を作り、wp_enqueue_style() で読み込みます。

/* assets/css/fonts.css */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-sans-jp-400.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-sans-jp-700.woff2") format("woff2");
}

/* 可変フォント: 太さを範囲で指定する */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-variable.woff2") format("woff2");
}

/* 英字は Inter、日本語は Noto Sans JP で表示する */
body {
  font-family: "Inter", "Noto Sans JP", sans-serif;
}

url() のパスは、この CSS ファイルの場所からの相対パスです。最後の font-family のように並べると、ブラウザは文字ごとに先頭のフォントから順に探すため、日本語の文字を持たない Inter で表示できない文字は Noto Sans JP で表示されます。

<?php
// functions.php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'mytheme-fonts',
		get_theme_file_uri( 'assets/css/fonts.css' ),
		array(),
		wp_get_theme()->get( 'Version' )
	);

	wp_enqueue_style(
		'mytheme-style',
		get_stylesheet_uri(),
		array( 'mytheme-fonts' ), // fonts.css の後に読み込む
		wp_get_theme()->get( 'Version' )
	);
} );

// ブロックエディターにも同じフォントを読み込む
add_action( 'after_setup_theme', function () {
	add_theme_support( 'editor-styles' );
	add_editor_style( 'assets/css/fonts.css' );
} );

クラシックテーマでは、add_theme_support( 'editor-styles' ) がないと、add_editor_style() で指定した CSS はブロックエディターに読み込まれません。エディターに読み込まれる CSS の中の相対パス（../fonts/…）は、WordPress がテーマの URL をもとに解決します。

Google Fonts の CSS を読み込む場合

Google Fonts のサイトで表示される <link> の URL を wp_enqueue_style() で読み込む方法もあります。

<?php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'mytheme-google-fonts',
		'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',
		array(),
		null // Google の URL に ?ver= を付けない
	);
} );

• Google Fonts の CSS は、日本語フォントを文字の範囲ごとの小さなファイルに分けて配信し、ページで使われている文字の範囲のファイルだけがダウンロードされます。日本語フォントを1つのファイルで自己ホストする場合と比べ、1ページで読み込む量が少なくなることがあります。
• 一方で、訪問者のブラウザが Google のサーバーに接続するため、訪問者の IP アドレスが Google に送られます。EU の訪問者が多いサイトなど、個人データの扱いに注意が必要な場合は、自己ホストを検討します。

Google Fonts の読み込みを速くする方法は「WordPressでGoogle Fontsを最適化して読み込む方法」で説明しています。

font-display と preload

font-display は、フォントの読み込みが終わるまでの表示方法を決めます。

swap は文字がすぐに読めますが、入れ替わるときに文字の幅が変わり、レイアウトがずれることがあります。ずれが気になる場合は optional も検討します。

ページの最初に表示される文字で使うフォントは、preload で早めに読み込ませることができます。WordPress 6.1 で追加された wp_preload_resources フィルターを使うと、<head> に <link rel="preload"> が出力されます。

<?php
add_filter( 'wp_preload_resources', function ( $resources ) {
	$resources[] = array(
		'href'        => get_theme_file_uri( 'assets/fonts/noto-sans-jp-400.woff2' ),
		'as'          => 'font',
		'type'        => 'font/woff2',
		'crossorigin' => 'anonymous', // フォントの preload には必要
	);
	return $resources;
} );

• フォントの preload には、自分のサーバーのファイルでも crossorigin 属性が必要です。ないと、preload したファイルが使われず、同じフォントが2回ダウンロードされます。
• preload は、最初の画面で実際に使うフォントだけにします。使わないフォントまで preload すると、ほかの読み込みが遅れます。

反映されないとき

• ブラウザの開発ツールの「ネットワーク」タブで、.woff2 が 404 になっていないかを確かめます。url() や file:./ のパスの間違いが多い原因です。
• フォントファイルを別のドメイン（CDN など）から配信している場合は、そのサーバーが Access-Control-Allow-Origin ヘッダーを返す必要があります。
• キャッシュ系のプラグインや CDN を使っている場合は、キャッシュを消してから確かめます。

ほかの原因と確かめ方は「WordPressのウェブフォントが読み込まれない場合の解決方法」で説明しています。

まとめ

• ブロックテーマでは theme.json の fontFace で登録すると、表示側とエディターの両方に読み込まれる
• クラシックテーマでは @font-face の CSS を wp_enqueue_style() で読み込み、エディターには add_editor_style() で読み込む
• 自己ホストする場合はフォントのライセンスを確認し、日本語フォントはウェイトを絞る
• font-display: swap は表示が早い代わりにレイアウトがずれることがあり、preload には crossorigin が必要