手順
- 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_script
と wp_enqueue_style
が利用できる。管理画面と、表示画面の両方に適用される
theme.jsonの指定
すでにtheme.jsonの中にタイポグラフィーに関連する記述があれば、その付近に追加する
"typography": {
"fluid": true,
"fontFamilies": [
{
"fontFamily": "取得したフォントファミリーの値, sanserif",
"name": "フォント名(ラベル)",
"slug": "スラッグ"
}
],
あとは、フルサイト編集の画面より、フォントを設定すればOK