WordPress theme.json のフォントサイズがエディターと合わないときの対処法

wordpressのブロックテーマでオリジナルテーマを作成しようとしたときにtheme.jsonを触りました。
fontSizeで大きさを調整しようとしたときにエディターで反映しなかったのでメモとして残しておきます。

❓ 問題

theme.json に以下のようにカスタムフォントサイズを定義したとします。

theme.json

"settings": {
  "typography": {
    "fontSizes": [
      {
        "fluid": false,
        "size": "13px",
        "slug": "small"
      },
      {
        "fluid": { "max": "18px", "min": "16px" },
        "size": "18px",
        "slug": "medium"
      },
      {
        "fluid": { "max": "32px", "min": "22px" },
        "size": "32px",
        "slug": "large"
      },
      {
        "fluid": { "max": "64px", "min": "36px" },
        "size": "64px",
        "slug": "x-large"
      },
      {
        "fluid": { "max": "120px", "min": "60px" },
        "size": "120px",
        "slug": "xx-large"
      },
      {
        "fluid": { "max": "160px", "min": "80px" },
        "size": "160px",
        "slug": "xxx-large"
      }
    ]
  }
}

しかし実際にブロックエディターで選択できるサイズは次のように表示されます。

• 小：13px
• 中：20px
• 大：36px
• 特大：42px
• xx-large：120px
• xxx-large：160px

👉 「中」「大」「特大」が theme.json の指定と合っていません。

💡原因

これは WordPress のデフォルトのフォントサイズプリセットが残っているため です。

WordPress には最初から以下のサイズが用意されています。

• small: 13px
• medium: 20px
• large: 36px

x-large: 42px

theme.json に独自の fontSizes を書いても、デフォルトが上書きされるのではなく追加される ため、両方が混在してしまいます。

✅ 解決方法

theme.json で デフォルトフォントサイズを無効化 すれば、指定したサイズだけが表示されます。

theme.json

{
  "settings": {
    "typography": {
      "defaultFontSizes": false,
      "fontSizes": [
        {
          "fluid": false,
          "size": "13px",
          "slug": "small"
        },
        {
          "fluid": { "max": "18px", "min": "16px" },
          "size": "18px",
          "slug": "medium"
        },
        {
          "fluid": { "max": "32px", "min": "22px" },
          "size": "32px",
          "slug": "large"
        },
        {
          "fluid": { "max": "64px", "min": "36px" },
          "size": "64px",
          "slug": "x-large"
        },
        {
          "fluid": { "max": "120px", "min": "60px" },
          "size": "120px",
          "slug": "xx-large"
        },
        {
          "fluid": { "max": "160px", "min": "80px" },
          "size": "160px",
          "slug": "xxx-large"
        }
      ]
    }
  }
}

これでエディター上には、定義した small / medium / large / x-large / xx-large / xxx-large のみが表示され、デフォルトの「中・大・特大」は消えます。

✍️ まとめ

• theme.json にフォントサイズを設定しても、WordPress デフォルトのサイズが混ざることがある

• settings.typography.defaultFontSizes: false を指定すれば解決できる

• オリジナルのフォントスケールを作るなら必須の設定

参考