Adobe Fontなどをブロックエディタに読み込む

手順

  • Adobe Font側で設定を行う
  • 埋め込むjsとCSSに記述するfont-familyの指定をメモ帳などに保存しておく
  • JSを読み込む
  • theme.jsonにfont-familyを追加する
  • フルサイト編集のスタイル→タイポグラフィより、フォントを指定する

JSの読み込み

funtions.phpなどに以下の要領で読み込む。その後、テーマ内の /assets/js/adobefonts.js に埋め込むjsを配置する

<?php
/**
 * Adobe Fontsを利用するためのスクリプトを追加
 */
function add_webfonts() {
	wp_enqueue_script( 'adobefonts', get_theme_file_uri() . '/assets/js/adobefonts.js', array(), '1.0', false );
}
add_action( 'enqueue_block_assets', 'add_webfonts' ); // ブロックエディタ用.

enqueue_block_assetsについて

wp_enqueue_scriptwp_enqueue_styleが利用できる。管理画面と、表示画面の両方に適用される

theme.jsonの指定

すでにtheme.jsonの中にタイポグラフィーに関連する記述があれば、その付近に追加する


		"typography": {
			"fluid": true,
			"fontFamilies": [
				{
					"fontFamily": "取得したフォントファミリーの値, sanserif",
					"name": "フォント名(ラベル)",
					"slug": "スラッグ"
				}
			],

あとは、フルサイト編集の画面より、フォントを設定すればOK