【初心者部】WordPressテーマのフルサイト編集 ( 2 ) Features around theme.json (Typography, Layout, Spacing, Color)

wordpress-develop

Last updated at 2025-09-23Posted at 2025-09-19

概要

以下のチュートリアル＞ [ 第2章 Theme.json ]
をおこなった記録。

前の記事:

次の記事:

環境

wordpress-develop ( Docker コンテナの WordPress 環境 ) を使用。

.bash

docker ps -a
CONTAINER ID   IMAGE                                                                          COMMAND                  CREATED        STATUS                    PORTS                                     NAMES
d844c2f7de74   vsc-src-ee47b25aac09ed2997b68384d2745e464f536bafa1aac67d1b823b83b7420469-uid   "/bin/sh -c 'echo Co…"   23 hours ago   Up 9 minutes                                                        brave_chaum
b4c47afb9392   nginx:alpine                                                                   "/docker-entrypoint.…"   4 days ago     Up 3 hours                0.0.0.0:8889->80/tcp                      wordpress-develop-wordpress-develop-1
673565aa0f6f   wordpressdevelop/cli:latest                                                    "/entrypoint.sh slee…"   4 days ago     Up 3 hours                9000/tcp                                  wordpress-develop-cli-1
401fdd352ccf   mysql:8.4                                                                      "docker-entrypoint.s…"   4 days ago     Up 3 hours (healthy)      33060/tcp, 0.0.0.0:64663->3306/tcp        wordpress-develop-mysql-1
4afec5543cb5   wordpressdevelop/php:latest                                                    "/entrypoint.sh /bin…"   4 days ago     Up 3 hours                9000/tcp                                  wordpress-develop-php-1

# PHP 8.2
docker exec -it wordpress-develop-php-1 php -v
PHP 8.2.29 (cli) (built: Aug  4 2025 20:53:17) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.29, Copyright (c) Zend Technologies
    with Zend OPcache v8.2.29, Copyright (c), by Zend Technologies

1. theme.json タイポグラフィ

1-1 カスタムフォントサイズ ( theme.json )

チュートリアルの該当ページ

theme.jsonファイルを作成

フォントサイズ
: "settings.typography.fontSizes" に設定する

wp-content/themes/lesson-one/theme.json

{
    "version": 3,
	"settings": {
		"typography": {
			"fontSizes": [
			    {
				    "slug": "extra-small",
				    "size": "1rem",
				    "name": "Extra small"
			    }
		    ]
		}
	}
}

theme.json の settings.typography.fontSizes に設定する内容 :

size: 任意の有効な CSS フォントサイズ値。

slug: WordPress が CSS カスタムプロパティで使用する一意の識別子。

name: エディターに表示される名前 (オプション)。

しかし、theme.jsonに 5種類未満のフォントサイズを指定すると、デフォルトのフォントサイズ ( Small: M, Medium: L, ... ) がサイトエディタに表示されている。

今回指定したのは、Extra small だけなので、それ以外のデフォルト Small, Medium, Large, Extra large がそのまま残っている。

→ WordPress 6.6 (theme.json versoin 3) 以降では、theme.json によって、WordPress の デフォルトフォントサイズをオーバーライドできないので、下記のコードを追加して無効にしないといけない

wp-content/themes/lesson-one/theme.json

{
    "version": 3,
	"settings": {
		"typography": {
+           "defaultFontSizes": false,

これで、カスタムフォントサイズとして追加した Extra Small だけが表示される状態になりました。

このままだと、1種類しか選べないので、カスタムフォントとして、Small, Medium, Large, Extra Large を追加。

wp-content/themes/lesson-one/theme.json

{
    "version": 3,
	"settings": {
		"typography": {
            "defaultFontSizes": false,
            "fontSizes": [
			    {
				    "slug": "extra-small",
				    "size": "1rem",
				    "name": "Extra small"
-			    }
+			    },
+			    {
+				    "slug": "small",
+				    "size": "1.5rem",
+				    "name": "Small"
+				},
+			    {
+				    "slug": "medium",
+				    "size": "2rem",
+				    "name": "Medium"
+				},
+			    {
+				    "slug": "large",
+				    "size": "3rem",
+				    "name": "Large"
+				},
+			    {
+				    "slug": "extra-large",
+				    "size": "4.5rem",
+				    "name": "Extra Large"
+				}
		    ]
		}
	}
}

これでカスタムフォントサイズがすべて追加されました。

コンテンツ幅の調整

ついでに、フォントファミリーとサイズに応じて、読みやすい長さにコンテンツの幅を調整します。以下の値を設定します。( フォントファミリーは Kaisei Decol )

settings.layout.contentSize
settings.layout.wideSize

[参考] 公式より:

この settings.layout.contentSize プロパティは主に、サイトのコンテンツ領域の幅を定義するのに役立ちます。これはサイトのデフォルトの幅と考えてください。

ほぼすべてのデザインにおいて、特にコンテンツにテキストが含まれる場合は、この幅を読みやすい範囲に制限する必要があります。この値はご自身で決定する必要がありますが、目安としては1行あたり45～75文字にするのが良いでしょう

手動で ( 明示的に ) フルサイズにしてみる:

wideSize を目一杯大きく (13.3インチディスプレイ、1920×1080 px) とり、concontentSize 幅に収まる文字数は Mediumのフォントサイズ 2rem で60文字とする。( Extra Small: 1rem, Small: 1.5rem)

rem は、HTMLのデフォルトフォントサイズの16px を基準にした倍率なので、settings.typography.fontSizes の size が 1rem ( 今回設定した theme.json の size の最小サイズ ) でちょうど 1920÷16=120文字。
よって、2rem で ( theme.jsonのsize ) 60文字。

wp-content/themes/lesson-one/theme.json

{
    "version": 3,
	"settings": {
		"layout": {
			"contentSize": "1920px",
			"wideSize": "1920px"
		}
	}
}

コンテンツの幅を1920px
ワイド幅を1920px
に設定。

(wordpress-develop のデフォルトは、620px, 1000 px)

なんか、アイキャッチ画像も横長になってしまっています。後で治そう。

Medium 2rem で半角数字が68文字入りました。ブラウザのデフォルトのフォントサイズが 16px より少し小さいのかもしれません。

なんか文字を打ってみます。

全角だと 37文字入りました。

英文字だと、78文字。

最後に、contentSize をもとの値に戻します。( 参照しているチュートリアルの場合は 840 px )

wp-content/themes/lesson-one/theme.json

{
    "version": 3,
	"settings": {
		"layout": {
-			"contentSize": "1920px",
+			"contentSize": "840px",
            "wideSize": "1920px"
		}
	}
}

1-2 行の高さと文字の太さ

Custom Line height

カスタムの行の高さ ( Custom Line height 、以下「カスタムラインハイト」とする) は、デフォルトでグローバルスタイルによって無効化されています。

下のスクショのように、デフォルトの高さは、1.5 に設定されています。

カスタムラインハイトを有効化するには、theme.json のtypography.lineHeight か
appearanceTools を true に設定します。

"settings": {
  "typography": {
+	"lineHeight": true
	}
}

"settings": {
+ "appearanceTools": true
}

ブロックごとに Custom Line height ( 行の高さ ) を指定する

すべてのブロックに同じ行の高さを設定することは、便宜上はあまりないと思います。

たとえば、タグライン ( サイトタイトルの下の副題てきな部分 ) の文字の大きさと、記事の抜粋 ( excerpt ) の文字の大きさにあわせて、行の高さを変えられるようにしたいと思います。

なので、ブロックごとに行の高さを設定できるように、以下のコードを追加します。

例) タグライン ( サイトタイトルの下の副題てきな部分 ) と記事の抜粋 ( excerpt ) の行の高さを設定します:

"settings": {
+ "blocks": {
+	"core/site-tagline": {
+	  "typography": {
+		"lineHeight": true
+	  }
+	},
+	"core/post-excerpt": {
+       "typography": {
+         "lineHeight": true
+       }
+    }
+ }
}

グローバル設定が優先される

AppearanceTools を true にすると、すべてのブロックでカスタムラインハイトを設定することが可能になります。(WordPress 6.9-alpha, theme.json version 3 の場合)

ブロック単位の設定は、<block-name>.typography.lineHeight を true にしてもしなくても、カスタムラインハイトを設定できるということです。

カスタムラインハイトを設定しない項目だけ false にする

なので、blocks.<block-name>.typography.lineHeight を false に設定したブロックだけ、カスタムラインハイトを設定しないようにできます。

たとえば、先ほど true に設定したタグラインをカスタムラインハイトを設定できないように、以下のコードに変更します:

"blocks": {
  "core/site-tagline": {
	"typography": {
-	  "lineHeight": true
+	  "lineHeight": false
	}
  }
}

false に設定したので、タグラインのブロックに対しては "Line height" というセクションが選択肢から消えています。( 下のスクショの赤枠内 "Appearance" の下 )

1-3 文字の外観と太さ

レギュラー体、イタリック体、ボールド体 ( regular, italic, and font weights)

フォントの見た目についてはデフォルトで有効になっています。

サイトエディターの以下のメニューから選択可能。
- Typography > Appearance

フォントの太さ

デフォルトで有効。サイトエディターで外観 ( Appearance ) メニューから設定可能。

その他の外観に関係するもの

以下の設定は、デフォルトで有効化されている:

textTransform
letterSpacing ( 文字の間隔 )
textDecoration ( 文字の装飾 : アンダーライン、取り消し線など )

2. レイアウト

2-1 レイアウトと間隔

チュートリアルの該当ページ

上でも少し触れましたが、settings.layout.contentSize や settings.layout.wideSize の設定により、コンテンツの幅を設定します。

ただし、theme.json では個々のブロックに対してコンテンツ幅を設定することはできません。

レイアウトパネルの設定

settings.layout.contentSize や settings.layout.wideSize には、以下のようにレイアウトパネルの設定からもアクセスできます :

WordPress Dashboard から、
Appearance > Editor > Styles で右のサイドバー下の方の "Layout" を選択。
以下の項目が該当。
- Content Width
- Wide Width

wp-content/themes/lesson-one/theme.json

{
    "version": 3,
	"settings": {
		"layout": {
			"contentSize": "840px",
            "wideSize": "1920px"
		}
	}
}

グループブロックなどの "Inner blocks use content width"

以下のように書いてありますが、実際に Wordpress 環境を手元で確認 ( 上のスクショ ) すると、“Inner blocks use content width” のトグルは見当たりません。

theme.json の contentSize や wideSize で設定した値は反映されていますが、トグル自体の表示や、ブロックの中央寄せなどのメニューはありません。

参照元のチュートリアルサイトより :

以下のブロックは、内部ブロック幅 ( inner block width ) コントロールを使用します：
クエリループ、グループ、投稿コンテンツ、カバー、メディアとテキスト、カラム。

「内部ブロックはコンテンツ幅を使用する」( “Inner blocks use content width” ) がオンになっている場合：

内部ブロックのデフォルトの幅は、テーマが theme.json の contentWidth として割り当てた値です。

レイアウトパネルの入力フィールドを使用して、内部ブロックの幅を指定できます。

ブロックを左、中央、または右に揃えることができます。

"Inner blocks use content width" を有効化する

まず、WordPressの特有の用語である「サポート」について。~~WordPressって好きなんだけど、ところどころネーミングとかダサいっすよね~~

WordPress の公式の説明より :

Support

Block Supports is the API that allows a block to declare support for certain features.
( ブロックサポートは特定のフィーチャーを宣言できるようにする APIです。
Opting into any of these features will register additional attributes on the block and provide the UI to manipulate that attribute.
(これらの ( Supports API によって宣言される ) フィーチャーは、ブロックに対して追加の属性を登録し、これらの属性を操作するための UI を提供します。)

次に、「レイアウトサポート」 ( Layout Support ) について。

WordPress の公式の説明より :

下記の default で true になっているサブプロパティを使用します。( theme.json の supports.layout を true にする )

layout
......

subprparty

allowEditing

allowInheriting

allowVerticalAlignment

allowJustification

allowOrientation

allowCustomContentAndWideSize

This value only applies to blocks that are containers for inner blocks.
( この値はインナーブロックのコンテナにのみ適用されます。 )

{
  "supports": {
    "layout": true
  }
}

さっき引用したサブプロパティ ( "allowCustomContentAndWideSize" , 一番下にある ) が、たぶん "Inner blocks use content width" のトグルに影響しているのでは。

layout.allowCustomContentAndWideSize
Type: boolean
Default value: true

For the constrained layout type only, determines display of the custom content and wide size controls in the block sidebar.

( 制限付きのレイアウトタイプのみ、カスタムのコンテンツ幅と、ワイドサイズの幅のコントロールを、ブロックのサイドバーに表示するかどうかを決定します。 )

theme.jsonに上記コードを追加して、サイトエディターで確認してみる:

+ {
+   "supports": {
+     "layout": true
+   }
+ }

"Inner blocks use content width" のトグルが無事表示されました。

"Inner blocks use content width" でコンテンツ幅をコントロール

上のスクショのトグルをオンにして、600 px にコンテンツ幅を指定しました。(自動でワイド幅も同じ値になる)

Before ( "Inner blocks use content width"適用前 ) :

After ( "Inner blocks use content width"適用後 ) :

選択したブロック内 ( 青いインジケーターの枠で囲まれた部分 ) のインナーブロックが、もともとの 840 px から、600 px に指定したことにより、狭くなっていることが分かります。

theme.json の設定値:

		"layout": {
			"contentSize": "840px",
			"wideSize": "1920px"
		},

2-2 余白の設定

マージンとパディングを設定します。

appearanceToolsで有効にしている場合は、settings要素にマージンとパディングを個別に有効にする必要はありません。

個別のブロックにマージンとパディングを設定

タイポグラフィと同様、settings.blocks.<block-name> に個別のブロックに対して以下の値を設定する。

spacing.margin
spacing.padding

ブロックにマージンとパディングを設定

上記の設定をelementsブロック内の各子要素に指定することもできます。

例) link 子要素にパディングを設定 (top、bottom に 0.3 rem のパディングを設定)

"styles": {
  "blocks": {
+    core/post-excerpt": {
+        "elements": {
+            "link": {
+                "spacing": {
+                    "padding": {
+                      "top": "0.3rem",
+                      "bottom": "0.3rem"
+                    }
+                }
+            }
+        }
}

上の例の場合、theme.jsonに設定された 文字サイズ (typography.fontSizes) をLargeサイズに 3rem を設定していれば、その 10分の1 = 数字1字の文字サイズを基準に計算して約 4.8px を設定。

実際に設定したコード:

"settings": {
  "blocks": {
+    core/post-excerpt": {
+                "spacing": {
+                    "padding": {
+                      "bottom": "4.8px",
+                      "top": "4.8px"
+                    }
+                }
+        }
+    }
  }
},
+"styles": {
+  "blocks": {
+    core/post-excerpt": {
+                "spacing": {
+                    "padding": {
+                      "bottom": "4.8px",
+                      "top": "4.8px"
+                    }
+                }
+        }
+    }

ちなみに theme.json には大きく以下の 2 つのセクションに分かれます:

settings には、エディタ ( WordPress のサイトエディタ ) の設定を書きます。( プリセットはこちらを使用している )
実際の WordPress サイト ( フロントエンド ) の設定は、styles に設定を書きます。

補足:

rem をpadding.top ,bottom の単位に設定したら、サイトエディターに反映されませんでした。( So, set 4.8 px instead of 0.3 rem )
もしかしたら Excerpt (記事の抜粋)ブロックに対して、(パディングの単位と同じ) theme.jsonに設定された文字の大きさ (typography.fontSizes ) の単位 (= rem) が基準となるが、「タイポグラフィ( "Typography" on Site Editor window ) > 文字サイズ ( "Size" as well ) 」を選択していないからかもしれない。

デフォルトのマージンとパディング

theme.json の styles に設定。

styles.blocks.<block-name>.spacing.padding
styles.blocks.<block-name>.spacing.margin

デフォルト値を設定しない場合は、パディングが 0px (あくまでサイトエディターでの見た目に、ですが。) になっていました。たぶんマージンも同じくでしょうね。

今回はこのデフォルト値はパスします。

spacing ( 間隔 ) のプリセット

padding, margin にはプリセットがあります。プリセットの値は、最初の状態では、サイトエディタではスケール ( スライドバーで、 1, 2, 3, 4, 5 などから選択 ) になっています。
カスタム値 ( 1.2px, 2.4px, 3.6px, 4.8px, 6px など ) にも設定できるようです。

プリセットの目的

ウェブサイト全体で一貫した間隔を簡単に使用できるようになります。
(チュートリアルより)

このへんはちょっと素人すぎて、spacing.margin との使い分けがよく分かりませんが。

今回は...

typography.fontSizes が 5種類 (EXtra Small, Small, Medium, Large, EXtra Large ) なのに、プリセットは 7段階のスライダーなのが分かりにくい (多すぎでは?) ので、ためしにプリセットも 5種類にしてみます。

また、(ノーコード的に直感的ではあるが) なまじ fontSizes を theme.json に設定したので、それにあわせたいです。

下記の表から、2X-Small、2X-Large はプリセットから削除します。

以下、チュートリアルより。

今回のフォントサイズと比較。大体フォントサイズの 70% くらい?

エディターのラベル	フォントサイズ	間隔プリセット
X-Small	1	0.67
Small	1.5	1
Medium	2	1.5
Large	3	2.25
X-Large	4.5	3.38

(単位:rem)

以下のように settings.spacing.spacingScale.steps を 0 にすることで、完全に自分の好きなようにスケールと値を指定することができます。

また、settings.spacing.defaultSpacingSizes を false にする必要があります。

settings.spacing.spacingSizes の配列にスケールのステップだけ要素を追加します。(今回は 5ステップ)

size に単位付きの値を指定。
slug に指定した文字を settings.blocks.core/post-excerpt.spacing.margin の --wp--preset--spacing--{slug} に指定する。( {}は不要 )

"settings": {
  "spacing": {
    "spacingScale": {
				"steps": 0
	},
	"defaultSpacingSizes": false,
  	"spacingSizes": [
		{
			"name": "Step 1",
			"size": "10.5px",
			"slug": "10"
		},
		{
			"name": "Step 2",
			"size": "16px",
			"slug": "20"
		},
		{
            "name": "Step 3",
            "size": "24px",
            "slug": "30"
        },
        {
            "name": "Step 4",
            "size": "36px",
            "slug": "40"
        },
        {
            "name": "Step 5",
            "size": "54px",
            "slug": "50"
        }
	]
}

以下の設定では、steps が 7以下のため、元の 7段階ステップのままになります。

以下のように、ブラウザデフォルトの 1rem = 16 px とし、中央値 (mediumStep ) を 16px にしようとしたのですが。(各ステップ上がるごとに 1.5 倍)

"settings": {
	"spacing": {
+        "spacingScale": {
+				"operator": "*",
+				"increment": 1.5,
+				"steps": 5,
+				"mediumStep": 16,
+				"unit": "px"
+		}
    }
}

記事の抜粋ブロックに、上で定義したプリセットのマージンを設定します:

"settings": {
  "blocks": {
    core/post-excerpt": {
	"spacing": {
		"padding": {
    		"bottom": "4.8px",
    		"top": "4.8px"
		},
+    	"margin": {
+			"bottom": "var(--wp--preset--spacing--30)",
+			"top": "var(--wp--preset--spacing--50)"			
+    	}
    }
  }
},
"styles": {
  "blocks": {
    core/post-excerpt": {
	"spacing": {
		"padding": {
    		"bottom": "4.8px",
    		"top": "4.8px"
		},
+    	"margin": {
+			"bottom": "var(--wp--preset--spacing--30)",
+			"top": "var(--wp--preset--spacing--50)"			
+    	}
    }
  }
}

スクショのように、5段階に変わっています。

2-3 アスペクト比

アイキャッチ画像 のアスペクトを指定します。アスペクト比は、縦の高さに対して幅を決定します。

ブロックグループ内部 のコンテナ要素はコンテンツ幅 ( ここまでは 840px に指定しています ) に合わせて幅が決定されます。

これに対して、画像などのアスペクト比を厳密に決めたいコンテンツには、アスペクト比を指定したいと思います。これはサイトエディタから適切なアスペクト比のプリセットを選ぶことができます:

Dimensions > Aspect Ratio

theme.json の settings.dimensions.aspectRatios でカスタムのアスペクト比 を定義することもできます。

レスポンシブデザインは？

上のプリセットのカスタムCSSプロパティ ( -wp-preset-aspect-ratio-3-2 など ) を使用すればとりあえずアスペクト比を設定できましたが、モバイルデバイスで見たときには、高さがデスクトップに比べてあまり多く取れません。環境によっては、だいぶ縮小されたり、印象が変わると思われます。

そのため、実際にはレスポンシブデザインに対応している WordPress テーマで CSS をより詳細にカスタマイズする必要がありそうです。本稿で参考にしたチュートリアルの主旨的に、範囲を越えそうなので別の機会にします。

3. Styles バリエーション

Styles Variation とは

Styles Variation は、データベースに保存され、テーマのアップデートにより変更の影響を受けない
JSONファイルに title を指定 ( e.g. latte ) し、各タイトルごとに title.json を作成し、そこに Styles Variation を指定します。

ディレクトリ構成 ( 例 )
```
/your-theme-folder
	/styles
		/latte.json
		/swashbuckler.json
	/theme.json
```

チュートリアルの該当ページ:

「Style バリエーション」として、別の JSON に設定します。最終的な設定内容は、ここで設定した内容とともに、もとの theme.jsonの settings, styles も含みます。

3-1 カラーパレットのプリセット

wp-content/themes/lesson-one/styles/light-blue.json

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Light blue",
	"description": "Two shades of light blue",
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "base",
					"color": "#f0f0f0",
					"name": "Base"
				},
				{
					"slug": "contrast",
					"color": "#1e1e1e",
					"name": "Contrast"
				},
				{
					"slug": "primary",
					"color": "#00A0D2",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#0073AA",
					"name": "Secondary"
				},
				{
					"slug": "transparent",
					"color": "transparent",
					"name": "Transparent"
				}
			]
		}
	}
}

Before

サイトエディタ＞Styles＞ Colors
＞Edit Pallette

wp-content/themes/your-theme/styles/light-blue.json に何も設定していないので、CUSTOM にはまだ何も表示されません。

AFTER

上のコードを追加すると、CUSTOM の場所に新しいカラーパレットが追加されました。

3-2 Styles Variation フォントファミリー

Styles Variation にシステムフォントを追加します。

レスポンシブデザインは？

一見、モバイルで扱うフォントと、デスクトップでフォントファミリーを別々のテーマに定義し、システムフォントのフォントファミリーと OS との互換性を各 Styles Variation で管理する、というのがシンプルにおもえます。

しかし、親テーマでモバイルを、子テーマでデスクトップのスタイルを定義する前提では問題 があります。

部分的なJSONファイル
親テーマのスタイルフォルダーにスタイルバリエーション、セクションスタイル、またはプリセットが含まれている場合、子テーマは独自のスタイルフォルダーに同じ名前の空のファイルを追加することで、それを削除または上書きできます。

Full site editing in child themes

子テーマの Styles Valition は、親テーマを上書きするので、別のシステムフォントのフォントファミリーを指定するには、向いていません。

なので、親テーマの Styles Valiationに指定します。

フォントファミリーの選択基準

OS標準フォントをなるべく網羅する。( macOS はフォントにうるさそうなので除外。なお筆者はWindowsローカル環境 )
/styles/theme.json の fontfamilies.fontfamily がごちゃごちゃするので、クロスプラットフォームのフォントは、サンセリフ、セリフ各 2～3 種類 にする。( helvetica neue, helvetica, arial／ Garamond, Times New Roman )

今回、wordpress-develop で構築したローカル環境にモバイルからアクセスすることはありません。
なので、今回はデスクトップのクライアントからアクセスしたときに表示したいフォントファミリー を、以下のように、親テーマ側で Styles Variationとして追加します。（ローカル環境は Windows ）

フォント	環境
`segoe ui`	Windows標準UIフォント
`Cantarell`	GNOME標準フォント
`Ubuntu`	Ubuntu標準UIフォント

wp-content/themes/lesson-one/styles/systemfont-classic.json

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Systemfont Classic",
	"description": "sans-serif and serif for Desktop",
	"settings": {
      "typography": {
        "fontFamilies": [
          {
            "fontFamily": "segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, arial, sans-serif",
            "slug": "system-sans-serif",
            "name": "System Sans-serif"
          },
          {
            "fontFamily": "Garamond, Times New Roman, serif",
		    "slug": "system-serif",
		    "name": "System Serif"
          }
        ]
    }
}

上のコードを追加し Style Variation としてシステムフォントを設定することで、Site Editor ( Apperance ＞ Editor ) の Styles にフォントの選択肢を追加できました:

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【初心者部】WordPressテーマのフルサイト編集 ( 2 ) Features around theme.json (Typography, Layout, Spacing, Color)

概要

環境

1. theme.json タイポグラフィ

1-1 カスタムフォントサイズ ( theme.json )

theme.jsonファイルを作成

コンテンツ幅の調整

1-2 行の高さと文字の太さ

Custom Line height

ブロックごとに Custom Line height ( 行の高さ ) を指定する

グローバル設定が優先される

カスタムラインハイトを設定しない項目だけ false にする

1-3 文字の外観と太さ

レギュラー体、イタリック体、ボールド体 ( regular, italic, and font weights)

フォントの太さ

その他の外観に関係するもの

2. レイアウト

2-1 レイアウトと間隔

レイアウトパネル の設定

グループブロックなどの "Inner blocks use content width"

"Inner blocks use content width" を有効化する

"Inner blocks use content width" でコンテンツ幅をコントロール

2-2 余白の設定

個別のブロックにマージンとパディングを設定

ブロックにマージンとパディングを設定

デフォルトのマージンとパディング

spacing ( 間隔 ) のプリセット

2-3 アスペクト比

3. Styles バリエーション

3-1 カラーパレットのプリセット

3-2 Styles Variation フォントファミリー

レイアウトパネルの設定