概要

WordPressのブロックエディタでアイコンを使いたいと思い、Google Material Symbolsを導入しようとしたときに少し手間取ったので、やり方をまとめておきます。

最初は「外観 ＞ エディタ ＞ スタイル」のタイポグラフィから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 をオーバーライドできるプラグインの利用するかが現実的だと思います。