ブロックテーマでGoogle Fontが利用できるようにする（メモ）

ブロックテーマでGoogleフォントを使えるようにする手順

フォントをダウンロードする

Google Fontsの公式サイトから、必要なフォントをダウンロードします。

※今回導入してみた「Noto Sans Japanese」の場合はこちらのページです。

フォント形式を変換する

ダウンロードしたファイルを解凍すると、2023年9月6日現在では以下のような構造になっています

• Noto_Sans_JP
  • static
    • NotoSansJP-Black.ttf
    • ．．．
  • NotoSansJP-VariableFont_wght.ttf
  • OFL.txt
  • README.txt

このうちフォントの使用に必要なのは、「NotoSansJP-VariableFont_wght.ttf」なのですが、そのままだとファイル容量が大きいので、「woff」「woff2」形式へ変換して利用します。

ちなみに2023年9月6日段階では、「ttf」形式の場合は9MB、「woff2」形式の場合は4.3MBと半分程度の容量になります。これがページ表示時にすべて読み込まれるわけではないので気にする必要はないとは思いますが、プラグインやテーマに封入してインストールしたりする場合に転送に時間がかかったりするので、できるだけ小さくしておいた方がよいかと思います。

「ttf」から「woff」「woff2」形式への変換は、オンラインツールだとうまくいかなかったので、「WOFFコンバータ」というソフトをインストールして行いました。

ここから先は「woff」「woff2」形式へ変換した前提で進めますので、「ttf」のままの場合は読み変えてください

フォント用のファイル・フォルダセットを作りプログラムを書く

パソコン上で「fonts」というフォルダを作り、以下のようにファイルを配置します。

• fonts
  • fonts-functions.php
  • style.css
  • NotoSansJP-VariableFont_wght.woff2
  • NotoSansJP-VariableFont_wght.woff

この「fonts」フォルダを自作プラグインのルート（プラグイン名.phpのある場所）へアップロードします。

アップロードしたら、サイトの管理画面から「ツール」→「プラグインファイルエディター」を開き、自作プラグインを選択します。

「プラグイン名.php」を開き、最終行に以下のコードを入力して保存します。

/***** google fonts *****/
//require_once (__DIR__ .'/fonts/fonts-functions.php');

「プラグイン名.php」と同じ階層にある「fonts」フォルダを開き、「fonts-functions.php」を開いて以下のコードを追加し、保存します。

<?php
//このファイルへの直接アクセスを禁止
if ( !defined( 'ABSPATH' ) ) exit;

function sample_enqueue_plugin_googlefont_style_init(){
	//スタイルシートの登録
	wp_register_style( 'sample-google-font', plugin_dir_url( __FILE__ ) .'fonts.css', array(),null, 'all' );


//スタイルシートの読み込み
	wp_enqueue_style('sample-google-font');

}
add_action('enqueue_block_assets','sample_enqueue_plugin_googlefont_style_init');

次に、「fonts.css」を開き、へ以下のコードを追加します。

@font-face {
  /* フォント名 */
  font-family: "NotoSansJP";
  /* フォントファイルの読み込み */
  src: url("./NotoSansJP-VariableFont_wght.woff2") format("woff2"),
       url("./NotoSansJP-VariableFont_wght.woff") format("woff");
}

手順通りに進めてエラー等が発生しなければ、これでGoogleフォントの読み込みは完了です。

確実に読み込みがされているかは、ブラウザのデベロッパーツールで、ヘッダーに「sample-google-font-css」というハンドル名のスタイルが読み込まれているか、「fonts.css」というファイルがステータス200で読み込まれているかなどの方法で調べてください

Googleフォントがエディター上で選択できるようにする

ブロックテーマの場合では、フォントの設定は「theme.json」というファイルを編集して行います。

テーマの「theme.json」の編集方法は大きく以下の3通りがあります。

1. 親テーマの「theme.json」を直接編集（非推奨）
2. 子テーマを有効化して親テーマの「theme.json」をコピーして編集
3. プラグインからプログラムを使って上書き

既に子テーマを有効化しているサイトであれば2を、そうでなければ3の方法がおすすめです。

ただ、3の方法では、完全な「theme.json」の内容を上書きするような処理が必要となりますので、今回は「Twenty Twenty-Two」テーマを使用し、本サイトで配布している以下のプラグインを使うことを前提に説明します。

「Twenty Twenty-Two(TT2)」テーマなので、上記プラグインのうちの「HA TT2 Theme Json Changer」の方をダウンロード後、インストールと有効化をします。

有効化したら、プラグインファイルエディターから、「HA TT2 Theme Json Changer」を選択し、「custom」→「change-setting.php」を開きます。

ここには、2023年9月6日現在のTT2テーマの「theme.json」の「settings」項目のすべてをPHP化して、上書きするためのコードが書かれています。

中ほどにある以下のコードを見つけます。

"fontFamilies"=> array(
				array(
					"fontFamily"=> "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"name"=> "System Font",
					"slug"=> "system-font"
				),

この下に以下のコードを追記して保存します。

				array(
					"fontFamily"=> "NotoSansJP",
					"name"=> "NotoSansJP",
					"slug"=> "google-font"
				),

エラーなく保存できたら、投稿や固定ページ（新規でも既存のでもOK）を開き、段落ブロックなどを選択します。

右サイドバーのデザインメニューから、「タイポグラフィー」という項目右の三点リーダー（縦に点が3つあるマーク）をクリックし、「フォント」をクリックします。

新しく表示された「フォント」という項目のプルダウンを開いて、以下の画像のように、「NotoSansJP」というのが選択できるようになっていれば、「theme.json」は問題なく書き換えられています。

あとは「デフォルト」「System Font」「NotoSansJP」などいろいろと変更してみて、ブロック側、フロントエンド側で変化があるかをチェックしたら完了です。

TT2では、「theme.json」のスタイル項目でブロックに対してフォント指定がされていない場合には「system-font」が使われるようになっています。標準のフォントを変更したい場合には、「system-font」項目の「fontfamily」パラメーターを変更しますが、「NotoSansJP」は日本語用フォントなので、英文フォントなどを含めた「フォントファミリー（優先度を持ったフォントの羅列）」で指定する必要があります。

後述　きれいなフォントだとは思うけど．．

今回は、ブロックテーマでGoogleフォントやその他のフォントを使うにはどうしたら？という個人的興味のもとで実際に実装してみたものをメモとして紹介しました。

確かにGoogleフォントなどのきれいなフォントを使用することはサイトをきれいに見せたり、読みやすくするために必要だとは思うのですが、何ミリ秒という話ではあるものの、少なからず読み込みに時間を要するため、ページの表示速度には影響があろうかと思います。

こんな説明ページを作っておいてアレですが、特に必要性がなければ、ブラウザ標準で読み込まれているフォント類を使っていてもいいのでは？というのが個人的な感想です。

参考にさせていただいたページ

• WordPressでGoogle Fontsを使用する
• Googleフォントをダウンロードし、自前のサーバーに設置して利用する方法
• 【WordPress】「Google Fonts」をWebサイトに読み込む設定と反映の方法！（プラグイン不要！手順はたったの3ステップ！）