WordPressのブロックテーマには、「フォントファミリーのプリセット」というサイト全体で使うフォントをあらかじめ定義・登録しておく仕組みがあります。theme.json内でフォント名やフォントファイルの読み込み先を指定しておくことで、この機能を利用できるようになります。

今回は、theme.jsonでフォントファミリーのプリセットを設定する方法について解説します。

フォントファミリーのプリセットを設定するメリット

フォントファミリーのプリセットを設定しておくと、主に次の3つのメリットがあります。

1. 統一感のあるデザインになる

サイト作成時や記事執筆時に、エディターのドロップダウンリストから登録済みのフォントを選ぶだけでスタイルが適用されるため、サイト全体で統一感のあるデザインを保ちやすくなります。

2. フォントを一箇所で集約管理できる

フォントの設定をtheme.json内にまとめておけるので、コードを一箇所変更するだけでサイト全体のフォントをまとめて変更できます。

3. ローカルホストの設定が簡略化できる

Webフォント（フォントファイルをサーバーにアップロードして読み込む方法）の設定も、このプリセット機能を使えば一括で登録・適用できます。

フォントファミリーのプリセットを設定する手順

それでは、実際にフォントファミリーのプリセットを設定する手順を紹介します。

今回は、「Create Block Theme」を利用した設定方法を紹介します。

フォントファイルを手動でアップロードする方法と、Googleフォントから任意のフォントをインストールしてローカルに設置する方法の2通りが選べます。

ここでは、Googleフォントからインストールする方法を紹介していきます。

Create Block Themeとは

WordPress公式チームが開発している、ブロックテーマの作成やカスタマイズを画面上の操作だけで完結させるためのプラグインです。通常、theme.jsonなどのコードを直接編集して行うテーマ設定を、ダッシュボードから視覚的に行えるようにします。

まずはWordPressダッシュボードの「外観」＞「フォント」をクリックし、「フォントをインストール」をクリックします。

検索窓にインストールしたいフォント名を入力します。ここでは例として「Noto Sans Japanese」をインストールします。

検索結果に表示されたインストールしたいフォントをクリックします。

バリアントが一覧表示されるので、インストールしたいものを選択して「インストール」をクリックします。

「フォントは正常にインストールされました」と表示されれば完了です。

外観 > フォント > ライブラリの「カスタム」を見ると、新たに追加したフォントが表示されているのが確認できます。

ただし、この状態では追加したフォントはテーマとは紐づいておらず、あくまでそのWordPress上でのみ使える状態（＝そのWordPressが利用しているデータベースに保存されている状態）です。

そのため、テーマを別のWordPressにインストール・適用しても、先ほど追加したフォントは移行先の環境では利用できません。

テーマと紐付けたい場合は、theme.jsonを上書きする必要があります。

追加したフォントをテーマに保存する

外観 > エディターからサイト編集画面を開き、スパナアイコンをクリックして「フォントを保存」にチェックが入っていることを確認します。

確認できたら、一番下にある「変更内容を保存」をクリックします。

先ほどは「カスタム」にのみ表示されていた新しいフォントが、「テーマ」という箇所にも表示されるようになります。

これで、テーマのtheme.jsonが上書きされ、追加したフォントがテーマと紐づけられたことになります。

追加したフォントがテーマと紐づけられたので、「カスタム」に表示されているフォントは削除しておきます。

「カスタム」に表示されているフォントをクリックします。

すべて選択した状態で「削除」をクリックします。

「フォントは正常にアンインストールされました」と表示されれば完了です。

「カスタム」に表示されていたフォントが消え、「テーマ」の方だけが残りました。

theme.jsonを確認すると、フォントファミリーのプリセットが追加されているのが確認できます。

CDNを利用する方法

CDN経由でGoogleフォントを利用する方法は、クラシックテーマの場合と同じです。

functions.phpに以下のように記述します。

/**
 * Google Fonts (Noto Sans JP) をCDN経由で読み込む共通設定
 */

// フォントのCDN URL(共通で使い回すため定数化)
if ( ! defined( 'MY_THEME_GOOGLE_FONTS_URL' ) ) {
    define( 'MY_THEME_GOOGLE_FONTS_URL', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap' );
}

/**
 * 1. フロント側にフォントを読み込む
 */
function my_theme_enqueue_google_fonts() {
    wp_enqueue_style(
        'google-fonts-noto-sans-jp',
        MY_THEME_GOOGLE_FONTS_URL,
        array(),
        null // バージョン管理不要のため null を指定
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_google_fonts' );

/**
 * 2. Google Fonts CDNへの事前接続（preconnect）でパフォーマンス改善
 */
function my_theme_preconnect_google_fonts() {
    echo '' . "\n";
    echo '' . "\n";
}
add_action( 'wp_head', 'my_theme_preconnect_google_fonts', 1 );

/**
 * 3. エディター側にもフォントを適用
 */
function my_theme_enqueue_block_editor_fonts() {
    wp_enqueue_style(
        'google-fonts-noto-sans-jp-editor',
        MY_THEME_GOOGLE_FONTS_URL,
        array(),
        null
    );
}
add_action( 'enqueue_block_editor_assets', 'my_theme_enqueue_block_editor_fonts' );

読み込んだフォントをプリセットとして追加するため、theme.jsonの settings > typography > fontFamilies に以下のように記述します。

CDN経由で読み込んでいるため、fontFace（ローカルファイルの指定）は不要です。

{
    "$schema": "https://schemas.wp.org/wp/7.0/theme.json",
    "version": 3,
    "settings": {
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "\"Noto Sans JP\", sans-serif",
                    "slug": "noto-sans-jp",
                    "name": "Noto Sans JP"
                }
            ]
        }
    }
}

WebフォントとGDPRについて

GDPR（General Data Protection Regulation：EU一般データ保護規則）は、EU（欧州連合）における個人情報やプライバシーを保護するための厳格な法律です。

ドイツなどの判例では、Google CDNからフォントを読み込む際にユーザーのIPアドレスが同意なしに米国のGoogleへ送信される挙動が、個人情報侵害にあたると認定されたケースがあります。

日本国内のユーザーのみを対象としたWebサイトであれば、GoogleのCDNをそのまま利用しても法的に直ちに問題となるケースは稀です。

とはいえ、EU圏からのアクセスがある可能性を考慮すると、日本国内向けのサイトであってもローカルホストを選択しておく方がベターだと言えるでしょう。

ローカルホストが推奨される理由

以前は「別サイトでキャッシュされたGoogleフォントを使い回せる」という理由で、CDNを利用するメリットがありました。

しかし近年の主要ブラウザ（ChromeやSafariなど）は、セキュリティ向上を目的として、キャッシュをドメインごとに孤立化させる仕組み（HTTP Cache Partitioning）を採用しています。

そのため現在では、自身のサーバーから直接フォントを読み込んだ方が、外部ドメインへのDNSルックアップや接続確立にかかる手間（RTT）が減り、Core Web Vitalsのスコアや読み込み速度が向上します。

また、外部のCDNへの依存を減らすことで、万が一Google側でネットワーク障害や外部連携エラーが発生した場合の、表示遅延やデザイン崩れも防止できます。

海外からのアクセスを完全に遮断していない限り、将来的にプライバシー規制が強化されたりグローバル対応が必要になったりした場合でも、あらかじめローカルホストにしておけば、後から改修する手間がかからずに済みます。