Google Fontsを使えるようにするtheme.jsonの設定方法

theme.jsonへのGoogle Fontsの導入方法

本ページの内容に沿ってGoogle Fontsを導入すると、以下のことができるようになります。

1. ブロックエディターのフォント選択で導入したGoogle Fontsが選択できるようになる
2. Google Fontsのフォントを日本語フォントの第一候補としてサイトへ表示できるようになる

2は応用編なので、ひとまず各所で任意にGoogleフォントを使いたいという方はそれほど難しいことなく設定できますよ。

今回は「Twenty Twenty-Three」テーマへ「Noto Sans JP」を導入した際のものを例として紹介します

【前準備】Googleフォントのダウンロードと変換

「Noto Sans JP」の入手

当初、外部リンク経由でも行けるのでは？と考えて実装してみましたが、適用されず、theme.jsonでのフォントの読み込みは、ローカル（サイト内）のファイルを参照する必要があります。

そこで、「Noto Sans Japanese」から、「Noto Sans JP」のフォントファイルをダウンロードします。

ダウンロードしたら解凍しておきましょう。

ファイルの変換

ダウンロードした中にある「ttf」という形式のファイルは重過ぎるので、「woff2」という形式のファイルへ変換します。変換には「WOFFコンバータ」という変換ツールが便利です。

が、ここでストップ！！基本的にはダウンロードした中の「NotoSansJP-Regular.ttf」というファイルのみを使い、これを「woff2」へ変換するのですが、変換しても2.2メガバイトもあり、とても実用には足りません（巨大なファイルを転送することになるので、アクセスしてくれた人に迷惑がかかります）。

そこで、「日本語WEBフォントをサブセット化する際の参考文字列一覧」に掲載されている「JIS第1水準＋常用漢字＋その他でまとめると（3759字）」だけを使うようにして軽量化します。

軽量化には「WOFFコンバータ」と同じところで提供されている「サブセットフォントメーカー」というツールを使います。

手順としては、以下の通りで、

1. 「サブセットフォントメーカー」で、「NotoSansJP-Regular.ttf」を「JIS第1水準＋常用漢字＋その他でまとめると（3759字）」だけにしたファイルを作る
2. 「WOFFコンバータ」で「woff2」形式に変換する

どちらのツールも簡単に使えるように設計されていますが、ツールをパソコンへインストールするのが嫌！という方やツールの使い方が分からないという方もいるでしょう。

そこで、私が作成したものでよければ以下からダウンロードできるようにしておくので、必要な方を使ってください。

ダウンロードしたら、解凍しておいてください

本来は自身で作成されることをおすすめします。不具合や何等かの不都合があっても一切責任は持ちませんので、使用の判断は自己責任でお願いします

ここから先は、「JIS第1水準＋常用漢字＋その他」側をダウンロードした前提で話を進めますので、自身で作成した方は置き換えて考えてください。

フォントファイルのアップロード

まずは解凍後のフォルダ名を「noto-sans-jp」に変更してください。

変更後以下のようなフォルダ＆ファイル構造になっているか確認してください。

• 「noto-sans-jp」フォルダ
  • 「NotoSansJP-HAver.woff2」ファイル

「noto-sans-jp」フォルダを「Twenty Twenty-Three」のフォルダにある以下の階層へアップロードしてください。

• 「twentytwentythree」フォルダ
  • 「assets」フォルダ
    • 「fonts」フォルダ
      • 「noto-sans-jp」フォルダ

これで前準備（フォントファイルの準備）は完了です。

1.Googleフォントをエディターの「フォント」で選択できるようにする

Googleフォントを追加するには、まず、「theme.json」でフォントの指定がどのようにされているかを理解する必要があります（読み飛ばしてもいいですが、後で苦労することになるかも知れません．．）。

例えば、Twenty Twenty-Threeでは、「DM Sans」などのオプションフォントが用意されていて、エディターから選択できるようになっています。

これに該当するtheme.jsonの記述は以下の部分でひとまとまりになっています。

{
	"fontFace": [
		{
			"fontFamily": "DM Sans",
			"fontStretch": "normal",
			"fontStyle": "normal",
			"fontWeight": "400",
			"src": [
				"file:./assets/fonts/dm-sans/DMSans-Regular.woff2"
			]
		},
		{
			"fontFamily": "DM Sans",
			"fontStretch": "normal",
			"fontStyle": "italic",
			"fontWeight": "400",
			"src": [
				"file:./assets/fonts/dm-sans/DMSans-Regular-Italic.woff2"
			]
		},
		{
			"fontFamily": "DM Sans",
			"fontStretch": "normal",
			"fontStyle": "normal",
			"fontWeight": "700",
			"src": [
				"file:./assets/fonts/dm-sans/DMSans-Bold.woff2"
			]
		},
		{
			"fontFamily": "DM Sans",
			"fontStretch": "normal",
			"fontStyle": "italic",
			"fontWeight": "700",
			"src": [
				"file:./assets/fonts/dm-sans/DMSans-Bold-Italic.woff2"
			]
		}
	],
	"fontFamily": "\"DM Sans\", sans-serif",
	"name": "DM Sans",
	"slug": "dm-sans"
},

おおまかにいうと、「fontFace」と「fontFamily」で1つのフォントの設定がされています。

fontFaceの役割と中身

「fontFace」は上の例でいえば「DM Sans」というフォントが選択され、「通常文字（normal）」「斜体（italic）」「太字」「太字斜体」のいずれかが指定されたときにどのファイルにある文字を呼び出して表示するかという設定です。

fontFamilyの役割と中身

「fontFamily」は「name」に指定されている名前がエディター上の「フォント」に表示され、それをクリックしたときにどうするか？というのを指定しています。

エディターから「DM Sans」を選択すると、「”DM Sans”, sans-serif」というフォントが割り当てられるという仕組みなんですね（「slug」はスタイルの出力で重複しないよう一意のものを指定していますからここではあまり気にしなくてもいいでしょう）。

なんとなくフォントの追加には「fontFace」と「fontFamily」のセットが必要なのね、とお分かりいただいたところで、続いて「Noto Sans JP」を選択できるようにするコードを挿入していきましょう。

以下が必要なコードです。

{
	"fontFace": [
		{
			"fontDisplay": "block",
			"fontFamily": "'Noto Sans JP'",
			"fontStretch": "normal",
			"fontStyle": "normal",
			"fontWeight": "400",
			"src": [
				"file:./assets/fonts/noto-sans-jp/NotoSansJP-HAver.woff2"
				
			]
		}
	],
	"fontFamily": "'Noto Sans JP', sans-serif",
	"name": "Google Noto JP",
	"slug": "google-noto-jp"
},

上記のコードを先ほどの「DM Sans」の設定の下へ入れてエラーなく保存できれば、既にエディターで「Noto Sans JP」が使用可能になっているはずです。

ここで、「DM Sans」のようにいろいろな種類のフォントスタイルは必要ないの？と思った方、まず、「Noto Sans JP」には斜体がないこと、また、太字の指定は「太字（B）」スタイルをエディターで選択したらきちんと太字になるので、上記の記述のままで大丈夫そうです。

厳密には太字用のフォントスタイルがあるので、太字用にフォントスタイルを追加したほうがいいのかも知れません（私は気にしません．．）

また、Googleフォント自体がどんなデバイス（OSやブラウザ）でも表示されるので、フォントファミリの指定は「Noto Sans JP」のみで構わないかと思いますが、もしも．．と感じる方は以下のようにしてファミリ指定をしておくといいでしょう。

【変更前のコード】

"fontFamily": "'Noto Sans JP', sans-serif",

【変更後のコード】

"fontFamily": "Futura, 'Century Gothic', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif",

実装すると、ブロックエディターでこんな風に選択できるようになります。

2.Googleフォントをサイト全体の通常フォントとして使用できるようにする

前項で、Googleフォントが使用できるようになったので、この際サイトのいろいろな場所のフォントをGoogleフォントに変えてしまいましょう。

この設定は同じくtheme.jsonの後ろの方にある「styles」というコードの下にある以下の部分の

"typography": {
	"fontFamily": "var(--wp--preset--font-family--system-font)",
	"fontSize": "var(--wp--preset--font-size--medium)",
	"lineHeight": "1.6"
}

「system-font」の部分を、上記のコードの場合で言えば、「slug」に指定した「google-noto-jp」に変えるだけです。

テーマによってはいろいろな場所でフォント指定されている場合がありますので、その際はすべての記述を書き換える必要があります

WordPress6.5以降ではもっと簡単に追加が可能になった

WordPress6.5以降では、サイトエディターからオプションフォントの追加ができるよう機能強化されました。

以下のページで追加や管理の方法などを詳しく紹介していますので、参考にしてみてください。

以上がGoogleフォントをtheme.jsonで使用する手順です。

TT3（Twenty Twenty-Three）で指定されている標準フォントと、「Noto Sans JP」とで大きく違うのは、ひらがなの「き」と「さ」などですので、文字を拡大するなどしてきちんと適用されるかを確認しましょう。

また、今回は単純にTT3（Twenty Twenty-Three）の親テーマ内にフォントファイルを転送して、theme.jsonを編集しましたが、このままだと将来テーマの更新が行われ、サイトでTT3テーマを更新した際にフォントがすべて無効になりますので、テーマをエクスポートして別テーマ化するなりして対応してください（これについては主旨から外れるので割愛します）。