サイトエディターからフォントの追加や管理を行う方法 – 6.5以降の新機能 –

公開日:2024(令和6)年3月30日/最終更新日:

WordPress Block Theme Customize | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

このサイトでも現在Google FontsのNoto Sans JPを使用していますが、WordPress6.4.x以前ではちょっと大変でした。

旧来の追加方法については以下のページで一例を詳しく紹介していますのでご覧いただければと思います。

WordPress6.5では、この作業が大幅に改善され、サイトエディターから簡単にフォントの追加・削除ができるようになり、フォントの追加・削除がとても簡単になりました。

とはいっても、WordPressの新機能は、毎度のごとくどうやって使ったらいいの?とイマイチ分かりにくいところがあるので、実際に追加や削除、追加後の操作などをしたものを画像を交えて詳しく紹介しておきます。

本ページではサイトエディター(管理画面から「外観」→「エディター」)を持つテーマを使用している前提でのレポートです

サイトエディター上でフォントの設定を行った場合、以降theme.jsonで変更を加えても無効(無視)になりますのでご注意ください(以下参考ページ)

フォントの追加・削除の方法

フォントの追加

ここではIBM Plex Sans JPを追加した場合の例として紹介します

管理画面から「外観」→「エディター」を選択してサイトエディターを開きます。

サイトエディターが開いたら、「スタイル」をクリックします。

サイトエディターでのフォントの追加①

「スタイル」の画面が開いたら、編集アイコン(鉛筆マーク)をクリックします。

サイトエディターでのフォントの追加②

画面右の方にある「タイポグラフィ」をクリックします。

サイトエディターでのフォントの追加③

切り替わった画面でフォント設定(下図赤枠内)をクリックします

サイトエディターでのフォントの追加④

「フォントをインストール」をクリックします。

サイトエディターでのフォントの追加⑤

Google Fontsとの接続が必要です..といったメッセージ画面が出ることがありますが、続行します

検索窓にキーワードを入力(今回は日本語フォントを探したかったので「JP」と入力)して絞り込み、目的のフォントをクリックします(今回はIBM Plex Sans JPを選択してます)。

サイトエディターでのフォントの追加⑥

必要なフォントのバリエーションをすべて選択して「インストール」をクリックします。

フォントは「フォント名 文字の太さ 装飾」と命名されていますので、必要なものを選択します。選択するほど読み込まれるフォントファイルの容量が増えますので注意が必要です

サイトエディターでのフォントの追加⑦

これでフォントの追加は完了です。

フォント追加後の変化

フォントを追加すると、下図のように、投稿編集画面その他のタイポグラフィのフォント選択画面で追加したフォントが選択できるようになります。

フォント追加後の編集画面

フォントの削除

フォントを削除する場合は、追加の場合のフォントバリエーション選択(またはフォント選択)画面で、フォントを選択後、画面右下の「削除」をクリックします。

サイトエディターでのフォントの削除

投稿などに追加されているフォントを選択した部分が既にある場合でフォントを削除した場合には、デフォルトに指定されているものを使って文字の表示はされると思いますが、詳しくは確認していません

次項のフォントファイル自体を削除した場合どうなるのかは試していませんので、削除する際はサイトエディターから行った方が無難かと思います

追加したフォントのファイルはどこに?

この方法で追加したフォントの実体ファイルは、「wp-content」→「uploads」→「fonts」フォルダの中に追加されます。

サイトエディターで追加したフォントの保存場所

テーマに同梱されているフォントとは違い、独立した場所に保存されるので、テーマを変更しても影響を受けることがないのがメリットです。

WordPress6.4.x以前にtheme.jsonからフォントを読み込ませる方法でも、フォントファイルをuploads内の任意のフォルダへ格納し、参照するファイルの場所をそこに設定すれば、同じように管理することもできますが、その場合にはテーマ変更時にtheme.jsonの記述を変更する必要がありますので注意ください

複数のフォントを安易にインストールするのは避けた方がいいかも

大容量転送時代なので気にされる方は少ないとも感じますが、フォントを追加するということは、そのフォントがいつでも使えるように読み込ませて準備をしておくおくということになります。

実際にフォントを追加すると以下のようにソースコード上に読み込み用のコードが追加されます(上は追加前、下は1つフォントを追加した場合のソース)。

フォントのHTMLソース(追加前)
追加フォントがない状態のソースコード
フォントのHTMLソース(追加後)
IBM Plex Sans JPフォントを追加した状態のソースコード

このファイルがどの位の容量があるのかというと、今回追加したIBM Plex Sans JPでは1.04MBあり、比較的精細度の高い画像1枚と同じ位の大きなファイルになります。

特に日本語のようなマルチバイトの文字は容量が大きいので、使用していない(使用するつもりのない)フォントを追加することで転送量が増え、ページの表示速度に少なからず影響が出る可能性がありますので注意が必要です。

なお、このページの公開後、WordPress公式の以下のページでも解説記事が公開されましたので、そちらもぜひご覧ください。

https://developer.wordpress.org/news/2024/04/01/how-to-register-custom-font-collections-for-the-font-library/

Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
プラグインなしでサイト内に英語の代替ページを作る方法