Apura v1.4.1では、WordPress 7.0以降のフォントライブラリ(外観 → フォント)で有効化したフォントを、カスタマイザーのタイポグラフィ設定から選べるようになりました。サーバーにアップロードしたフォントや、フォントライブラリ経由でインストールしたフォントを、本文や見出しにそのまま指定できます。
あわせて、フォントライブラリとGoogle Fontsの両方に同じフォントがある場合は、Google Fonts APIへのリクエストを自動で省略するようになりました。
この記事では、使い方と判定の仕組み、既存サイトを更新するときの確認ポイントを紹介します。
v1.4.1で変わったこと
- フォントライブラリで有効なフォントを、タイポグラフィ設定の「Font Family」で選択可能に(WordPress 7.0以降)
- 同じフォントがフォントライブラリで有効な場合、Google Fontsの読み込みを自動で省略
- 保存済みのタイポグラフィ設定とGoogle Fonts設定はそのまま維持
- WordPress 6.6〜6.9では従来どおりの動作
対応するWordPressのバージョン
| WordPressのバージョン | v1.4.1の動作 |
|---|---|
| 7.0以降 | フォントライブラリの有効なフォントが選択肢に追加され、重複するGoogle Fontsの読み込みを省略 |
| 6.6〜6.9 | フォントライブラリ連携は動作せず、これまでと同じ(Google Fonts・システムフォントのみ) |
WordPress 6.6〜6.9では、テーマはフォントライブラリの設定を読み込まず、選択肢も追加しません。既存の設定や表示が変わることはないので、WordPress本体の更新前にApuraだけ先に更新しても問題ありません。
フォントライブラリのフォントを使う方法
- フォントライブラリでフォントを有効化する
管理画面の外観 → フォントを開き、使いたいフォントをインストールまたはアップロードして有効化します。
- カスタマイザーを開き直す
フォントの一覧はカスタマイザーを開いた時点で読み込まれます。カスタマイザーを開いたままフォントを追加した場合は、いったん閉じてから外観 → カスタマイズを開き直してください。
- Font Familyでフォントを選ぶ
Typographyセクションの「Body Typography」や「H2 Typography」などを開き、Font Familyの一覧から「Font Library」グループのフォントを選択します。
- ウェイトを調整して公開する
フォントを選ぶとFont Weightは400にリセットされます。必要に応じて変更し、「公開」を押して保存します。
Font Familyの一覧の並び
Font Familyの一覧は、「Default」「Inherit」のあとにFont Library → Google Fonts → System Fontsの順で表示されます。Font Libraryグループには、フォントライブラリで付けられている名前が表示されます。有効なフォントが1つもない場合、このグループは表示されません。
選択肢に表示されるのは、フォントライブラリで有効化されていて、フォントファイルの読み込み元(src)を持つフォントだけです。インストール済みでも無効にしているフォントは表示されません。
保存される値
フォントライブラリのフォントを選ぶと、表示名ではなく、WordPressが定義しているCSSのfont-familyの値がそのまま保存されます。引用符やフォールバックフォントも含まれます。
"Noto Sans JP", sans-serif
保存先は従来と同じタイポグラフィ設定のfont_familyです。@font-faceのCSSはWordPress本体が出力するため、テーマ側で二重に出力することはありません。
フォントウェイトの選択肢
フォントライブラリのフォントを選んだ場合、Font Weightはシステムフォントと同じ汎用の選択肢(Default・Normal・Bold・100〜900)になります。Google Fontsの「Google Font Settings」で設定したバリアントの影響は受けません。
Google Fontsとの重複読み込みを防止
たとえば「Google Font Settings」にNoto Sans JPを登録したまま、同じNoto Sans JPをフォントライブラリでも有効化すると、これまでは同じフォントを2か所から読み込む可能性がありました。
v1.4.1では、フォントライブラリで有効なフォントと一致するGoogle Fontsを、APIリクエストから自動で除外します。
除外はフロントエンドとブロックエディターの両方に適用されます。外部のGoogle Fontsサーバーへのリクエストが減るため、表示速度の改善や、外部サービスへの通信を減らしたいサイトにも役立ちます。
一致の判定ルール
判定には、フォントライブラリ側のfont-familyの値の先頭のフォント名だけを使います。
大文字・小文字の違いと、前後の引用符は無視されます。フォントライブラリの表示名やスラッグ、フォールバックとして並んでいるフォント名は判定に使いません。
| フォントライブラリ側のfont-family | Google Fonts「Noto Sans JP」の読み込み |
|---|---|
"Noto Sans JP", sans-serif | 省略する(一致) |
'noto sans jp', sans-serif | 省略する(大文字・小文字、引用符の違いは無視) |
"Noto Sans JP Local", sans-serif(表示名は「Noto Sans JP」) | 読み込む(表示名は判定に使わない) |
"My Font", "Noto Sans JP", sans-serif | 読み込む(2番目以降のフォールバックは判定に使わない) |
一致したGoogle Fontsは、カスタマイザーのFont Family一覧でもGoogle Fontsグループから外れ、Font Libraryグループのフォントとして表示されます。
既存のGoogle Fonts設定はそのまま使えます
すでにタイポグラフィ設定でGoogle Fontsのフォント名(例:Noto Sans JP)を保存しているサイトでも、再設定は不要です。一致するフォントがフォントライブラリで有効になると、Font Familyの表示はFont Libraryのフォントに切り替わりますが、保存値は書き換えられず、Font Weightもリセットされません。
フォント自体はWordPressが出力するフォントライブラリの@font-faceから読み込まれます。
「Google Font Settings」に登録したフォントの設定(バリアントなど)も削除されません。フォントライブラリ側でそのフォントを無効化すると、次のページ読み込みから以前と同じGoogle Fontsのリクエストに自動で戻ります。
注意点
フォントの有効化・無効化後はカスタマイザーを開き直す
カスタマイザーのフォント一覧は、画面を開いたときの状態で作られます。外観 → フォントでフォントを有効化・無効化したあとは、カスタマイザーを開き直してから設定してください。
フォントライブラリにしかないフォントは有効のままにする
Google Fontsにも同じフォントがある場合(前述の既存設定のケース)は、無効化してもGoogle Fontsの読み込みに戻るだけなので、表示が崩れる心配はありません。
更新後に確認したいポイント
- WordPress 7.0以降で、外観 → フォントに有効なフォントがあるか確認する
- カスタマイザーを開き直し、Font Familyに「Font Library」グループが表示されるか確認する
- Google Fontsとフォントライブラリで同じフォントを使っている場合は、ブラウザの開発者ツールで
fonts.googleapis.comへのリクエストが省略されているか確認する - 指定したウェイトがフォントライブラリにインストールされているか確認する
- フォントライブラリにだけあるフォントを使っている場合は、そのフォントを無効化していないか確認する
関連情報
v1.4.1では、WordPress標準のフォントライブラリで管理しているフォントを、Apuraのタイポグラフィ設定からそのまま使えるようになりました。フォントをサーバーに置いて配信したいサイトや、Google Fontsの外部リクエストを減らしたいサイトは、ぜひ活用してください。