概要

概要

WordPressの「外観 ＞ エディタ ＞ スタイル」のタイポグラフィからGoogle Fontsを選択することも可能ですが、読み込みが遅かったり一部のフォントが使えなかったりする場合があります。

この記事では、Webフォントとして読み込み、theme.json に font-family として登録する方法を紹介します。

手順

①使用中のテーマに使用したいMaterial Symbolsのパスを通す

使用中のテーマの functions.php に以下を追記します。

add_action('wp_enqueue_scripts',functions(){

  	wp_enqueue_style('site_icons','https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200', array(), '1.0.0');

});

②テーマのtheme.jsonにフォントを登録する

theme.jsonの settings.typography.fontFamilies に以下を追記します。
下記は「Material Symbols Outlined」を利用する場合の例です。

{
	"fontFace": [
		{
			"fontFamily": "Material Symbols Outlined",
			"fontStyle": "normal",
			"fontWeight": "300 700",
			"src": [
				"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined%3Aopsz%2Cwght%2CFILL%2CGRAD%4020..48%2C100..700%2C0..1%2C-50..200"
			]
		}
	],
	"fontFamily": "\"Material Symbols Outlined\"",
	"name": "Material Symbols Outlined",
	"slug": "material-symbols"
}

③管理画面（エディタ）にもフォントを読み込む

ここまでの設定で、管理画面のフォント一覧にMaterial Symbols Outlinedが追加されます。

ただし、このままではエディタ上でアイコンとして表示されません。なのでfunctions.phpでエディタにもGoogle Fontsを読み込むよう記述します。

add_action('after_setup_theme', function() {
	// Material Symbols をエディターに読み込む
	add_editor_style('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200');
});

これでブロックエディタのタイポグラフィ設定からMaterial Symbolsを選択・使用できるようになります。

ポイント

wp_enqueue_scripts と add_editor_style の両方が必要

フロントエンド用の読み込み（wp_enqueue_scripts）とエディタ用の読み込み（add_editor_style）は別管理です。片方だけだと「サイトには表示されるがエディタ上でアイコンにならない」または「エディタでは見えるがフロントで機能しない」という状態になります。両方に読み込み処理を追加することを忘れずに。

theme.json への登録はフォント選択UIに反映させるため

wp_enqueue_scripts でWebフォントを読み込むだけでも、CSSでクラスを直接指定すれば利用は可能です。ただし、ブロックエディタのタイポグラフィUI（スタイル ＞ タイポグラフィ）から選択・適用できるようにするには、theme.json の settings.typography.fontFamilies への登録が必要です。

まとめ

設定箇所	目的
functions.php（wp_enqueue_scripts）	フロントエンドへのWebフォント読み込み
theme.json（fontFamilies）	エディタのタイポグラフィUIへの登録
functions.php（add_editor_style）	エディタへのWebフォント読み込み

Material SymbolsをWordPressのブロックエディタで使うには、フロントとエディタそれぞれへの読み込み と theme.json への登録 の3点セットで対応します。theme.json を編集できるカスタムテーマや子テーマ環境であれば、比較的シンプルに導入できます。

既存のサードパーティテーマを利用していて theme.json を直接編集できない場合は、子テーマを作成するか、theme.json をオーバーライドできるプラグインの利用するかでできるようになるかと思います。