WordPress 6.5で実装されたフォントライブラリ機能完全ガイド

WordPress 6.5で実現した「フォントライブラリ」とは？

2024年3月にリリースされたWordPress 6.5の目玉機能の一つが、待望の「フォントライブラリ」です。この機能により、WordPressユーザーは追加プラグインなしで、サイト全体のフォントを管理しやすくなりました。

Googleフォントの導入や独自フォントのアップロードなど、これまでプラグインやカスタムコードに頼りがちだった作業を、WordPressの標準機能として扱いやすくなった点は大きな進化です。

なお、この記事ではWordPress 6.5で導入された当初の使い方をベースに解説しつつ、その後の補足情報もあわせて紹介します。特に、フォントの入れすぎによる表示速度低下を避けるために、必要最小限のフォントだけを導入する考え方も重視して解説します。

なぜフォントライブラリが重要なのか？

フォントはウェブサイトのブランドアイデンティティ、読みやすさ、そしてユーザー体験に大きな影響を与えます。これまでWordPressでフォントをカスタマイズするには、以下のような選択肢がありました：

テーマが提供する限られたフォントオプションを使用する
カスタムCSSを記述してウェブフォントを実装する
プラグインを導入してフォント管理を行う

これらの方法にはそれぞれ課題がありました。テーマの選択肢は限定的で、カスタムCSSは技術的知識が必要で、プラグインは追加の依存関係やパフォーマンスへの影響がありました。

WordPress 6.5のフォントライブラリは、これらの課題を解決し、以下のメリットを提供します：

シンプルさ：技術的知識がなくてもフォントを簡単に追加・管理
パフォーマンス：最適化されたフォント読み込みによるサイト速度向上
プライバシー：Googleフォントをローカルホスティングして訪問者のプライバシー保護
一貫性：サイト全体で統一されたタイポグラフィの実現
依存関係の削減：フォント管理プラグインが不要に

フォントライブラリの基本的な使い方

WordPress 6.5でフォントライブラリを使い始める方法は非常にシンプルです。ただし、6.5の登場当初は、この機能を使うには基本的に「ブロックテーマ」を利用している必要がありました。従来のクラシックテーマでは利用しにくいため、その点には注意が必要でした。

その後、Gutenberg側ではクラシックテーマやハイブリッドテーマでの対応も進んでいます。ただし、実際にどこまで使えるかは、利用中のWordPress本体のバージョン、Gutenbergプラグインの有無、テーマ構成によって変わるため、現在もまずは自分の環境で確認するのが確実です。

フォントライブラリへのアクセス方法

WordPress管理画面から「外観」→「エディター」を選択
右上の「スタイル」アイコンをクリック
「タイポグラフィ」を選択
「フォントを管理」ボタンをクリック

これで、フォントライブラリの管理画面が表示されます。ここから、インストール済みのフォントの確認、新しいフォントのインストール、フォントの削除などが行えます。

フォントライブラリで可能なこと

WordPress 6.5のフォントライブラリでは、主に以下の3つのことが可能です：

機能	説明	使用例
Googleフォントの追加	多数のGoogleフォントから選んでインストール	見出しに「Montserrat」、本文に「Open Sans」を使用
ローカルフォントのアップロード	購入したフォントや独自フォントをアップロード	企業ブランドフォントをサイト全体に適用
フォントの適用管理	見出し、本文など要素別にフォント設定	H1～H6、段落、ボタンなど各要素に異なるフォント適用

Googleフォントを追加する手順

Googleフォントは豊富な種類があり、無料で使えることから最も人気の高いウェブフォントです。フォントライブラリを使ってGoogleフォントを追加する手順は以下の通りです：

フォントライブラリ管理画面で「フォントをインストール」タブを選択
「Googleフォント」セクションで「Googleフォントへのアクセスを許可」をクリック
検索バーでフォント名を検索するか、カテゴリから閲覧
使いたいフォントを見つけたら、そのフォント名をクリック
プレビューを確認し、使用したいウェイト（太さ）やスタイル（斜体など）を選択
「インストール」ボタンをクリック

インストールしたGoogleフォントは、外部CDNから毎回読み込むのではなく、サイト側に保存してローカル配信できます。これにより、外部リクエストを減らしやすくなり、プライバシー面に配慮しやすいだけでなく、表示の安定性やパフォーマンス面でも有利になる場合があります。

Googleフォント選びのポイント

効果的なフォント選定のために、以下のポイントを考慮しましょう：

読みやすさを優先：特に本文テキストは読みやすさを最優先
ウェイトのバリエーション：見出しから本文まで使える複数のウェイトがあるフォントを選択
文字のサポート範囲：日本語コンテンツの場合、日本語をサポートするフォントを確認
ページ読み込み速度への影響：多すぎるフォントウェイトはパフォーマンスに影響するため、必要最小限に

カスタムフォントをアップロードする方法

独自のフォントや商用フォントをサイトで使いたい場合は、直接アップロードする機能が便利です。手順は以下の通りです：

フォントライブラリ管理画面で「フォントをインストール」タブを選択
「フォントをアップロード」セクションをクリック
「新しいフォントファミリーを追加」をクリック
フォントファミリー名を入力（例：「Corporate Brand Font」）
フォントファイルをアップロード（主な対応フォーマット：.woff2, .woff, .ttf, .otf）
フォントスタイル（Regular, Bold, Italic など）とウェイトを設定
「追加のフォントファイルを追加」で別のウェイトやスタイルを追加可能
「保存」をクリック

フォントファイルは、可能であれば.woff2形式を優先するのがおすすめです。一般的に.ttfや.otfより軽量にしやすく、表示速度への影響を抑えやすいためです。手元のフォントが.ttfや.otfしかない場合でも利用はできますが、パフォーマンスを重視するなら、配信用にはできるだけ.woff2を用意したいところです。

アップロードの際の注意点

カスタムフォントをアップロードする際は、以下の点に注意しましょう：

ライセンス確認：フォントのライセンスがウェブ使用を許可しているか確認
ファイルサイズ：大きすぎるフォントファイルはパフォーマンスに影響
文字範囲：特に日本語フォントは文字数が多いため、使用する文字セットを絞ることも検討
フォントファミリー情報：正確なフォント名とウェイト情報を入力

フォントを効果的にサイトに適用する方法

フォントをインストールしたら、次はサイト全体に効果的に適用しましょう。WordPress 6.5では、グローバルスタイルを通じてさまざまな要素にフォントを適用できます：

基本的なフォント適用手順

「外観」→「エディター」から「スタイル」パネルを開く
「タイポグラフィ」を選択
「テキスト」セクションで以下の設定が可能：
・「全般」：サイト全体のデフォルトフォント
・「見出し」：すべての見出し（H1-H6）のデフォルト
・「各見出し」：H1からH6まで個別に設定
・「段落」：本文テキスト専用の設定
各セクションで「フォント」オプションをクリックし、インストール済みのフォントから選択
フォントサイズ、行の高さ、装飾なども同時に設定可能

高度なフォント適用テクニック

より細かくフォントをカスタマイズするには、以下のテクニックが役立ちます：

ブロックタイプ別の設定：特定のブロック（ボタン、引用など）にカスタムフォント設定
カラーバリエーションとの組み合わせ：背景色に合わせたフォントスタイル
スタイルバリエーションの活用：同じブロックに複数のスタイルを用意
responsive font-size：画面サイズに応じて自動調整されるフォントサイズ設定

パフォーマンスを落とさないために、導入するフォントは絞るのがおすすめ

フォントライブラリが便利だからといって、多くのフォントを入れすぎるのはおすすめできません。表示速度を意識するなら、まずは本当に必要なフォントだけを導入することが大切です。

導入の具体例

たとえば、次のような構成であれば、過剰になりにくく実用的です。

本文：Noto Sans JP Regular
見出し：Noto Sans JP Bold

あるいは、見出しだけ雰囲気を変えたい場合でも、

本文：読みやすい日本語サンセリフ 1種類
見出し：アクセント用フォント 1種類

くらいまでに抑えるのが無難です。

避けたい例

本文・見出し・ボタン・装飾用で別々のフォントを入れる
使わないのに 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 を全部入れる
日本語フォントを複数ファミリーまとめて追加する

特に日本語フォントはファイルサイズが大きくなりやすいため、欧文フォント以上に「入れすぎない」ことが重要です。

フォントライブラリのテクニカルな側面

フォントライブラリは単なるUIの変更ではなく、技術的にも優れた実装がなされています：

パフォーマンス最適化

WordPress 6.5のフォントライブラリには、以下のパフォーマンス最適化が施されています：

フォントファイルのローカル管理：外部CDN依存を減らしやすく、構成を把握しやすい
フォント管理の一元化：テーマや追加コードに分散しがちな設定を整理しやすい
不要なフォントを削除しやすい：使っていないフォントやウェイトを見直しやすい
軽量な構成を作りやすい：必要なフォントだけに絞る運用がしやすい

実際の表示速度は、導入するフォント数、ウェイト数、ファイル形式、テーマやキャッシュ設定によって変わります。そのため、「フォントライブラリを使えば自動で速くなる」と考えるよりも、「軽い構成を作りやすくなる機能」と捉えるほうが実務的です。

開発者向け機能

WordPress開発者にとっては、フォントライブラリAPIを通じて拡張機能の開発が可能です：

カスタムフォントソース：独自のフォントプロバイダを追加可能
プログラム的なフォント管理：PHPコードからフォントを管理
フォント設定のカスタマイズ：特定のフォント読み込み方法のカスタマイズ
テーマ統合：テーマデフォルトフォントとしてフォントライブラリを活用

開発者向けには、フォントライブラリ関連のAPIやフィルターも用意されています。たとえば次のようなものがあります。

テーマやプラグインからフォントコレクションを登録したい場合は、wp_register_font_collection() を使う方法もあります。

// フォントディレクトリをカスタマイズ
add_filter( 'font_dir', 'my_custom_font_directory' );

// フォントコレクションに関連するフィルター
add_filter( 'rest_wp_font_family_collection_params', 'my_font_family_params' );
add_filter( 'rest_prepare_wp_font_family', 'my_prepare_font_family' );

// フォントディレクトリをカスタマイズ

add_filter( 'font_dir', 'my_custom_font_directory' );

// フォントコレクションに関連するフィルター

add_filter( 'rest_wp_font_family_collection_params', 'my_font_family_params' );

add_filter( 'rest_prepare_wp_font_family', 'my_prepare_font_family' );

フォントライブラリの制限事項と注意点

フォントライブラリは強力な機能ですが、以下のような制限や注意点もあります：

ブロックテーマ限定：従来のクラシックテーマでは使用できない
対応フォント形式の制限：主に.woff2、.ttf、.otfのみサポート
可変フォント対応の限定：一部の可変フォント（Variable Font）機能が制限される場合がある
大量のフォントによるパフォーマンス影響：多すぎるフォントファミリーやウェイトはサイト速度低下の原因に
既存サイトとの互換性：既存のフォント設定との競合可能性

クラシックテーマでGoogleフォントをローカル導入する実践手順

WordPress 6.5で登場したフォントライブラリは、基本的にはブロックテーマ向けの機能ですが、クラシックテーマでも少し工夫すれば活用できます。

初心者の方にとって分かりやすい方法は、一時的にブロックテーマに切り替えてフォントライブラリからGoogleフォントをダウンロードし、そのフォントをクラシックテーマ側で利用するという方法です。

大まかな流れは次の通りです。

必要に応じてメンテナンス表示を行う
一時的にブロックテーマへ切り替える
フォントライブラリからGoogleフォントをインストールする
保存されたフォントファイルを確認する
使用中のテーマ（または子テーマ）へコピーする
@font-face を記述したCSSを作成する
functions.php でCSSを読み込む
必要に応じてフォントを preload する

1. 一時的にブロックテーマへ切り替える

クラシックテーマではフォントライブラリの画面が使えない場合があるため、フォントを取得する目的で一時的にブロックテーマへ切り替える方法が分かりやすいです。

本番サイトで作業する場合は、表示崩れを避けるためにメンテナンス表示を行ってから作業すると安心です。

ブロックテーマに切り替えたら、次の順でフォントライブラリを開きます。

「外観」→「エディター」へ進む
「スタイル」を開く
「タイポグラフィ」を選択する
フォント管理画面を開く
「フォントをインストール」タブを選択する
「Google Fonts へのアクセスを許可」をクリックする

2. Googleフォントをインストールする

フォント一覧から使用したいフォントを選び、必要なウェイトだけをインストールします。

特に日本語フォントはファイルサイズが大きいため、最初は次の程度に絞るのがおすすめです。

Regular（400）
Bold（700）

例えば Noto Sans JP を使用する場合、この2つだけで本文と見出しの両方をカバーできることが多いです。

3. 保存されたフォントファイルを確認する

インストールされたフォントは通常、次のフォルダに保存されます。

/wp-content/uploads/fonts/

1	/wp-content/uploads/fonts/

フォントファイルは次のようなランダムな名前になっていることがあります。

F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFBEj757Y0rw-oME.woff2

1	F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFBEj757Y0rw-oME.woff2

これはWordPressが内部管理のために生成した識別名です。そのため、テーマで利用する場合は分かりやすい名前に変更しておくと管理しやすくなります。

例えば次のようにリネームします。


NotoSansJP-Regular.woff2
NotoSansJP-Bold.woff2

NotoSansJP-Regular.woff2

NotoSansJP-Bold.woff2

4. テーマフォルダへフォントを配置する

使用中のテーマ、または子テーマの中にフォント用フォルダを作り、そこへコピーします。


your-theme/
├─ functions.php
├─ style.css
└─ assets/
   ├─ css/
   │  └─ custom-fonts.css
   └─ fonts/
      ├─ NotoSansJP-Regular.woff2
      └─ NotoSansJP-Bold.woff2

your-theme/

├─ functions.php

├─ style.css

└─ assets/

├─ css/

│ └─ custom-fonts.css

└─ fonts/

├─ NotoSansJP-Regular.woff2

└─ NotoSansJP-Bold.woff2

将来的なテーマアップデートの影響を避けるため、可能であれば子テーマに配置するのがおすすめです。

5. フォント用CSSを作成する

次に、フォントを読み込むためのCSSを作成します。

@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

body,
p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Noto Sans JP", sans-serif;
}

@font-face {

font-family: "Noto Sans JP";

src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");

font-weight: 400;

font-style: normal;

font-display: swap;

}

@font-face {

font-family: "Noto Sans JP";

src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2");

font-weight: 700;

font-style: normal;

font-display: swap;

}

body,

li,

h1,

h2,

h3,

h4,

h5,

h6 {

font-family: "Noto Sans JP", sans-serif;

}

テーマによっては見出しや本文に個別のフォント指定があるため、bodyだけでなく見出しや段落にも指定しておくと反映されやすくなります。

6. functions.php でCSSを読み込む

次に、functions.php からフォント用CSSを読み込みます。

親テーマに設置している場合は次のように書きます。


function mytheme_enqueue_custom_fonts() {
    wp_enqueue_style(
        'mytheme-custom-fonts',
        get_template_directory_uri() . '/assets/css/custom-fonts.css',
        array(),
        null
    );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_custom_fonts', 20 );

function mytheme_enqueue_custom_fonts() {

wp_enqueue_style(

'mytheme-custom-fonts',

get_template_directory_uri() . '/assets/css/custom-fonts.css',

array(),

null

);

}

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_custom_fonts', 20 );

子テーマを使っている場合は、次の関数を使用します。


function mytheme_enqueue_custom_fonts() {
    wp_enqueue_style(
        'mytheme-custom-fonts',
        get_stylesheet_directory_uri() . '/assets/css/custom-fonts.css',
        array(),
        null
    );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_custom_fonts', 20 );

function mytheme_enqueue_custom_fonts() {

wp_enqueue_style(

'mytheme-custom-fonts',

get_stylesheet_directory_uri() . '/assets/css/custom-fonts.css',

array(),

null

);

}

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_custom_fonts', 20 );

優先度を 20 にすることで、テーマ側で指定されているフォントをあとから上書きしやすくなります。

7. よく使うフォントだけ preload する

さらに表示を安定させたい場合は、本文用フォントだけ preload しておく方法もあります。

preload は「このファイルを優先的に読み込んでほしい」とブラウザに伝える仕組みです。


function mytheme_preload_custom_font() {
    ?>
    <link
        rel="preload"
        href="<?php echo esc_url( get_stylesheet_directory_uri() . '/assets/fonts/NotoSansJP-Regular.woff2' ); ?>"
        as="font"
        type="font/woff2"
        crossorigin>
    <?php
}
add_action( 'wp_head', 'mytheme_preload_custom_font', 1 );

function mytheme_preload_custom_font() {

<link

rel="preload"

href="<?php echo esc_url( get_stylesheet_directory_uri() . '/assets/fonts/NotoSansJP-Regular.woff2' ); ?>"

as="font"

type="font/woff2"

crossorigin>

<?php

}

add_action( 'wp_head', 'mytheme_preload_custom_font', 1 );

ただし、preloadは多用すると逆効果になることがあります。まずは本文で確実に使うフォント1つだけに絞るのがおすすめです。

この方法を使えば、クラシックテーマでもGoogleフォントをローカル配信でき、表示速度やプライバシー面でも安心して運用できます。

フォントライブラリを活用するベストプラクティス

フォントライブラリを最大限に活用するためのベストプラクティスを紹介します：

1. フォントの選択と組み合わせ

最大2-3種類のフォントファミリーに制限（見出し用、本文用、アクセント用）
同じフォントファミリー内で複数のウェイトを活用
対比的な組み合わせ（セリフ＋サンセリフなど）で視覚的階層を作る

2. パフォーマンスへの配慮

必要最小限のウェイトとスタイルのみをインストールする
本文用1種類、必要なら見出し用1種類程度に抑える
日本語フォントは特に入れすぎに注意する
可能であれば .woff2 形式を優先する
導入後はCore Web VitalsやPageSpeed Insightsで変化を確認する

3. アクセシビリティの確保

読みやすさを優先した選択（特に本文フォント）
十分なコントラストとフォントサイズの確保
視覚障害のある方への配慮（過度に装飾的なフォントを避ける）

4. レスポンシブデザインへの対応

モバイル画面でも読みやすいフォント選択
レスポンシブフォントサイズの設定
複数デバイスでのテスト

フォントライブラリに関するよくある質問

フォントライブラリについて、サイト管理者からよく寄せられる質問とその回答をまとめました：

Q1: 既存の有料フォントプラグインはもう必要ない？

A: 基本的なフォント管理ならフォントライブラリで十分ですが、より高度な機能（フォントの条件付き適用、複雑なタイポグラフィなど）を必要とする場合は、専用プラグインが依然として役立つことがあります。

Q2: 日本語フォントも使える？

A: はい、日本語対応のフォントも利用できます。ただし、日本語フォントはファイルサイズが大きくなりやすいため、たくさんのフォントファミリーやウェイトを同時に入れすぎないことが重要です。まずは本文用1種類、必要なら見出し用を1種類追加する程度から始めるのがおすすめです。

Q3: クラシックテーマでも使えるようになる予定はある？

A: WordPress 6.5の登場当初は、フォントライブラリは基本的にブロックテーマを前提とした機能でした。その後、Gutenbergではクラシックテーマやハイブリッドテーマでの対応も進んでいます。ただし、実際の利用可否や操作画面は、WordPress本体のバージョンやGutenbergプラグインの有無によって変わるため、現在の環境での確認が必要です。

Q4: インストールできるフォント数に制限はある？

A: 技術的には制限はありませんが、多すぎるフォントはサイトのパフォーマンスに影響するため、必要最小限にとどめることをお勧めします。実用的には2〜3種類のフォントファミリーが理想的です。

WordPressのフォントライブラリは、どんなサイトに向いている？

フォントライブラリは、特に次のようなサイトで効果を発揮しやすい機能です。

ブロックテーマを使ってサイト全体のデザインを整えたいサイト
プラグインを増やさずにフォント管理をしたいサイト
Googleフォントをローカル管理したいサイト
ブランドフォントを安全に管理したい企業サイト

一方で、クラシックテーマ中心の古い構成や、テーマ側で強くタイポグラフィが固定されているサイトでは、導入前に互換性を確認したほうが安心です。

実践例：フォントライブラリを使ったサイトデザイン改善

フォントライブラリを使って実際にサイトデザインを改善した例を紹介します：

ケーススタディ1：企業サイトのリブランディング

課題：新しい企業ブランドガイドラインに合わせたフォント実装
実施内容：カスタム企業フォントをアップロード、見出しと本文に異なるウェイト適用
結果：ブランドの一貫性向上、プロフェッショナルな印象の強化

ケーススタディ2：読みやすさの改善

課題：ブログコンテンツの長文読解性向上
実施内容：本文フォントをより可読性の高いものに変更、行間や文字間隔の最適化
結果：読みやすさが向上し、長文コンテンツでも離脱されにくい構成に改善

まとめ：フォントライブラリの可能性を活かす

WordPress 6.5で導入されたフォントライブラリは、サイトのタイポグラフィ管理に革命をもたらしました。プラグインなしでの高度なフォント管理が可能になり、サイトデザインの可能性が大きく広がっています。

フォントライブラリの主なメリットを再確認しましょう：

追加プラグインなしでのフォント管理
Googleフォントのローカルホスティングによるプライバシーとパフォーマンスの向上
カスタムフォントの簡単アップロード
サイト全体での一貫したタイポグラフィの実現

これからWordPress開発はさらに進化し、フォントライブラリも機能拡張されていくでしょう。この強力な新機能を活用してサイトのビジュアルとユーザー体験を向上させてみてください。

繰り返しになりますが、実務的には、フォントライブラリを導入したからといって多くのフォントを追加する必要はありません。むしろ、本文用の読みやすいフォントを1つ選び、必要であれば見出し用を1つ加える程度の構成のほうが、デザインとパフォーマンスの両立がしやすくなります。まずは最小構成で導入し、表示速度を確認しながら少しずつ調整していくのがおすすめです。

当社では、フォントライブラリの活用を含めたWordPressサイトのカスタマイズのご相談を承っております。ご質問やサポートが必要な場合は、お気軽にお問い合わせください。