theme.jsonで追加したはずのフォントが認識されないときは(メモ)

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

WordPressのトラブル対処方法の画像

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



ブロックテーマでtheme.jsonに間違いなく、問題なく追加したはずのフォントが選択できない現象が発生しました。

発生したのはTwenty Twenty-Three(以下TT3とします)をフォーク(派生化)したテーマ。

「assets」→「fonts」フォルダに「OpenRunde」というフォルダに入れた「OpenRunde.woff2」をアップロードし、以下のような記述を追加して、「OpenRunde」というフォントを認識させようとしました。

				{
					"fontFace": [
						{
							"fontDisplay": "block",
							"fontFamily": "'OpenRunde'",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/OpenRunde/OpenRunde.woff2"
							]
						}
					],
					"fontFamily": "OpenRunde, sans-serif",
					"name": "OpenRunde",
					"slug": "OpenRunde"
				}

手順が間違っていないことは、他のブロックテーマで確認済み、なぜか今有効化しているテーマでだけ発生するという何とも悩ましい状況でした。

試しに無効にしているTT3のデフォルトで入っているフォント(theme.json上でのみ記述を削除)を、theme.jsonの記述を足して有効化してみたものの、認識されず..何とも困った状況になりました。

結局原因は、何かのテストか何かで、サイトエディターのスタイル設定を触って保存したことだったようで、下図のようにしてスタイルをリセットすることで解決しました。

theme.jsonで追加したはずのフォントが認識されないときは(メモ)|Personal WP Customization Notes (PWCN)

上図はリセット後(解決後)のものなので、「スタイルをリセット」というリンクが薄い色で表示されクリックできない状態になっていますが、何等かのスタイル設定を施しているとここがクリック可能になる仕組みのようです。

どこのWordPressバージョンからこの仕様になったのかは不明ですが、動作的には、テーマの初期有効化状態ではtheme.jsonを読み込み、サイトエディター(外観→エディターから起動する編集画面)のスタイルに何かを加えて保存すると、データベースにその情報が記憶され、保持されるようになるため、その後theme.jsonの記述を変更しても何も変化しないということが原因だったようです。

他の記述について、同じようになるのかは確認していませんが、ひょっとしたら同じように不具合?と感じることもあるかも知れませんね。

私の場合はテストサイトで起きたことであり、基本的にサイトエディターのスタイル設定では何もしない(theme.jsonが設定のすべて)に決めてサイトは作っているので単純に「スタイルのリセット」で解決しましたが、そうでない場合は、サイトエディターで設定したスタイル(グローバルスタイル=サイト全体のスタイル)がすべてクリアになってしまうので注意が必要かと思います。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
画面に表示させずにデバッグ情報(エラーや警告の情報)を取得する方法