theme.jsonでフォントサイズのプリセットを設定する方法

Web制作

2026.08.26

WordPressでは、theme.jsonを使ってブロックエディターで利用できるフォントサイズのプリセットを設定できます。

この記事では、theme.jsonでフォントサイズを定義する際に押さえておきたいポイントとして、デフォルトのフォントサイズを無効にする方法、流体タイポグラフィを設定する方法、カスタムフォントサイズの有効・無効を切り替える方法を紹介します。

フォントサイズのプリセットを設定する

まずは、theme.jsonのsettings > typography > fontSizesでフォントサイズのプリセットを定義します。

ここで注意したいのが、theme.jsonのバージョンが3の場合です。

現在のWordPressでは、small、medium、large、x-large、xx-largeがデフォルトのフォントサイズslugとして扱われています。

theme.json v3では、settings.typography.defaultFontSizesがデフォルトでtrueになっています。そのため、これらのデフォルトプリセットは、テーマ側で同じslugを指定しても上書きできません。

独自のフォントサイズプリセットを設定したい場合は、defaultFontSizesをfalseにして、WordPress側のデフォルトプリセットを無効にしておきましょう。

{
	"$schema": "https://schemas.wp.org/wp/7.0/theme.json",
	"version": 3,
	"settings": {
		"typography": {
			"defaultFontSizes": false,
			"fontSizes": [
				{
					"fluid": false,
					"name": "Small",
					"size": "12px",
					"slug": "small"
				},
				.
				.
				.
			]
		}
	}
}

流体タイポグラフィを有効にする

フォントサイズをより柔軟に調整したい場合は、**流体タイポグラフィ（Fluid Typography）**を利用できます。

流体タイポグラフィとは、画面幅（ビューポート）の変化に応じて、フォントサイズを滑らかに変化させる仕組みです。

従来のメディアクエリを使った方法では、ブレイクポイントを境にフォントサイズが段階的に切り替わります。一方、流体タイポグラフィでは画面幅に応じてフォントサイズが連続的に変化するため、さまざまな画面サイズで自然な文字サイズを保ちやすくなります。

settings > typographyのfluidをtrueにすると、流体タイポグラフィを有効にできます。

{
	"$schema": "https://schemas.wp.org/wp/7.0/theme.json",
	"version": 3,
	"settings": {
		"typography": {
			"defaultFontSizes": false,
			"fluid": true,
			"fontSizes": [
				{
					"fluid": false,
					"name": "Small",
					"size": "12px",
					"slug": "small"
				},
				{
					"fluid": {
						"max": "16px",
						"min": "14px"
					},
					"name": "Medium",
					"size": "16px",
					"slug": "medium"
				},
				.
				.
				.
			]
		}
	}
}

また、流体タイポグラフィは、フォントサイズごとに個別設定することもできます。

たとえば、上記のSmallのようにfluidをfalseにすると、そのフォントサイズでは流体タイポグラフィを無効にできます。

一方、fluidにminとmaxを指定すると、その範囲内でフォントサイズを流動的に変化させることができます。

このように、すべてのフォントサイズを一律に流動化するのではなく、デザインに応じてプリセットごとに調整できます。

カスタムフォントサイズを設定する

WordPressのブロックエディターでは、用意されたフォントサイズのプリセットを選択するだけでなく、ユーザーが任意のフォントサイズを入力することもできます。

この機能を制御するのが、settings > typography > customFontSizeです。

customFontSizeをtrueにすると、ユーザーが任意のフォントサイズを指定できるようになります。逆にfalseにすると、任意のフォントサイズを入力できなくなります。

たとえば、自由なフォントサイズを指定されることでレイアウトやデザインが崩れる可能性がある場合は、falseにしておくとよいでしょう。

{
	"$schema": "https://schemas.wp.org/wp/7.0/theme.json",
	"version": 3,
	"settings": {
		"typography": {
			"defaultFontSizes": false,
			"customFontSize": false,
			"fluid": true,
			"fontSizes": [
				{
					"fluid": false,
					"name": "Small",
					"size": "12px",
					"slug": "small"
				},
				{
					"fluid": {
						"max": "16px",
						"min": "14px"
					},
					"name": "Medium",
					"size": "16px",
					"slug": "medium"
				},
				.
				.
				.
			]
		}
	}
}