2026年5月27日

WordPressのブロックエディターのタイポグラフィをtheme.jsonで管理する方法（フォント・文字サイズ・行間）

テーマ・デザイン

ブロックエディターで使えるフォント、文字サイズ、行間などのタイポグラフィは、テーマの theme.json にまとめて定義すると、エディターの選択肢とフロントの表示を一か所で管理できます。考え方は「settings でエディターに出す選択肢を決め、styles でサイト全体と要素・ブロックごとの既定値を決める」です。この記事では、WordPress 6.6 以降の theme.json バージョン3を前提に、フォントの登録、流体タイポグラフィ付きの文字サイズ、見出しやブロック単位のスタイル、編集者に自由にさせない制限のかけ方、そして「書き換えたのに反映されない」ときの確認方法までを説明します。

theme.json・block.json・グローバルスタイルの関係

タイポグラフィの値は複数の場所から合成されます。どこに書いた値が勝つのかを先に押さえておくと、後のトラブルが減ります。

コアの既定値: WordPress 本体が持つ既定の文字サイズなど。
block.json: 各ブロックが「どのタイポグラフィ設定に対応するか」（supports.typography）を宣言する場所です。テーマ作者が値を決める場所ではありません。
テーマの theme.json: 親テーマ、その上に子テーマの theme.json がマージされます。
ユーザーのグローバルスタイル: サイトエディターの「スタイル」で保存した変更は、wp_global_styles という投稿タイプとしてデータベースに保存され、テーマの theme.json より優先されます。
個別ブロックの設定: 投稿内のブロックごとに選んだ文字サイズなどは、そのブロックに限って最優先です。

つまり、サイトエディターで一度でもタイポグラフィを保存していると、theme.json を書き換えてもその項目は上書きされたままになります。「反映されない」原因の多くはここにあります。

なお、theme.json はブロックテーマが主な対象ですが、クラシックテーマに置いてもエディターの設定（使えるフォントサイズなど）を制御できます。ただし、サイトエディターが使えないなど挙動に差があるため、この記事の例はブロックテーマを想定しています。

作業の前に：子テーマとバックアップ

配布テーマの theme.json を直接編集すると、テーマ更新で消えます。子テーマを作り、子テーマ側に theme.json を置いてください。子テーマの theme.json は親テーマの内容に上書きマージされるため、変更したいキーだけを書けば足ります。

本番で試す前に、ステージング環境で確認し、サイトエディターのスタイル変更を伴う場合はデータベースのバックアップも取っておくと安全です。

フォントを登録する（settings.typography.fontFamilies）

フォントは settings.typography.fontFamilies に配列で登録します。fontFace を書けば、テーマ内のフォントファイルを WordPress が @font-face として出力してくれるため、自前で CSS を書いて読み込む必要がありません。

{
  "$schema": "https://schemas.wp.org/wp/6.6/theme.json",
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "name": "Noto Sans JP",
          "slug": "noto-sans-jp",
          "fontFamily": "\"Noto Sans JP\", sans-serif",
          "fontFace": [
            {
              "fontFamily": "Noto Sans JP",
              "fontWeight": "100 900",
              "fontStyle": "normal",
              "fontDisplay": "swap",
              "src": [ "file:./assets/fonts/NotoSansJP-Variable.woff2" ]
            }
          ]
        },
        {
          "name": "システムフォント",
          "slug": "system",
          "fontFamily": "system-ui, -apple-system, \"Hiragino Sans\", \"Yu Gothic UI\", sans-serif"
        }
      ]
    }
  }
}

src の file:./ はテーマフォルダーからの相対パスです。登録したフォントは --wp--preset--font-family--noto-sans-jp のような CSS 変数になり、エディターのフォント選択肢にも表示されます。

日本語フォントで注意したいのはファイルサイズです。日本語のフルセットは数MBになることがあり、そのまま読み込むと表示が遅くなります。使う文字に絞ったサブセットの woff2 を用意する、本文はシステムフォントにして見出しだけWebフォントにする、といった割り切りも検討してください。fontDisplay を swap にすると、フォント読み込み中も代替フォントで文字が表示されます。テーマ内に置く（セルフホスト）方式なら、外部のフォント配信サーバーへの通信も発生しません。

WordPress 6.5 以降は、サイトエディターのフォントライブラリから管理画面でフォントを追加することもできます。こちらで追加したフォントはデータベースとアップロードフォルダー側で管理されるため、「コードで管理したいフォント」は theme.json、「運用担当者が後から足すフォント」はフォントライブラリ、と役割を分けると混乱しにくくなります。

文字サイズのプリセットと流体タイポグラフィ

文字サイズは settings.typography.fontSizes に定義します。fluid を有効にすると、画面幅に応じて clamp() で滑らかに変化するサイズを WordPress が計算して出力します。

{
  "version": 3,
  "settings": {
    "typography": {
      "fluid": true,
      "defaultFontSizes": false,
      "customFontSize": false,
      "lineHeight": true,
      "fontSizes": [
        { "name": "小", "slug": "small", "size": "0.875rem", "fluid": false },
        { "name": "標準", "slug": "medium", "size": "1rem", "fluid": false },
        { "name": "大", "slug": "large", "size": "1.375rem", "fluid": { "min": "1.125rem", "max": "1.375rem" } },
        { "name": "特大", "slug": "x-large", "size": "2rem", "fluid": { "min": "1.5rem", "max": "2rem" } }
      ]
    }
  }
}

ポイントは次のとおりです。

本文サイズは fluid を切る: 本文まで画面幅で縮むと、スマートフォンで読みにくくなることがあります。本文や注釈は "fluid": false で固定し、見出しなど大きいサイズだけを可変にするのが扱いやすい構成です。
単位は rem を基本に: px で固定するとブラウザーの文字サイズ設定が効きにくくなります。アクセシビリティの観点でも rem が無難です。
defaultFontSizes: コア既定の文字サイズを選択肢に出すかどうかを決めるキーです。バージョン3では、テーマが fontSizes を定義したときのコア既定値との関係がバージョン2から変わっているため、意図を明示する意味で書いておくと挙動が読みやすくなります。
customFontSize: false にすると、編集者が任意の数値を入力する欄が出なくなり、プリセットだけから選ぶ運用になります。
lineHeight: 行間の入力欄を出すかどうかです。

スラッグは CSS 変数名（--wp--preset--font-size--large）になり、投稿内のブロックにもクラス名として保存されます。運用開始後にスラッグを変えると既存記事の見た目が崩れるため、スラッグは最初に決めたら変えない前提で付けてください。

サイト全体・見出し・ブロックごとの既定値（styles）

settings が「選択肢」なら、styles は「何も選ばれていないときの見た目」です。サイト全体、見出しなどの要素、特定ブロックの順に細かく指定できます。

{
  "version": 3,
  "styles": {
    "typography": {
      "fontFamily": "var:preset|font-family|noto-sans-jp",
      "fontSize": "var:preset|font-size|medium",
      "lineHeight": "1.8"
    },
    "elements": {
      "heading": {
        "typography": { "fontWeight": "700", "lineHeight": "1.4" }
      },
      "h2": { "typography": { "fontSize": "var:preset|font-size|x-large" } },
      "h3": { "typography": { "fontSize": "var:preset|font-size|large" } }
    },
    "blocks": {
      "core/code": {
        "typography": {
          "fontFamily": "ui-monospace, Menlo, Consolas, monospace",
          "fontSize": "var:preset|font-size|small"
        }
      }
    }
  }
}

var:preset|font-size|medium は、プリセットを参照する theme.json 独自の書き方で、出力時に var(--wp--preset--font-size--medium) に変換されます。プリセットを参照しておけば、後でサイズの値を変えたときに一か所の修正で全体に反映されます。

elements.heading は h1〜h6 にまとめて効き、h2 などを個別に書くとそちらが優先されます。日本語は欧文より行間を広めにすると読みやすいことが多く、本文は 1.7〜1.9 程度、見出しは詰め気味にするのが一般的な出発点です。

ブロック単位で選択肢を絞る

特定のブロックだけ設定を変えたいときは、settings.blocks にブロック名をキーにして書きます。たとえば、段落ブロックのドロップキャップを使わせない、見出しブロックでは文字の太さを変えさせない、といった制御です。

{
  "version": 3,
  "settings": {
    "blocks": {
      "core/paragraph": {
        "typography": { "dropCap": false }
      },
      "core/heading": {
        "typography": { "fontWeight": false, "letterSpacing": false }
      }
    }
  }
}

選択肢を絞るほど見た目のばらつきは減りますが、既存記事で使われていた設定が編集画面に出なくなることがあります。既存サイトでは、主要な記事をエディターで開いて確認してから本番に反映してください。

書き換えたのに反映されないとき

反映されない場合は、次の順に確認すると原因を絞り込めます。

JSON の構文エラー: カンマの過不足や引用符の閉じ忘れがあると、ファイル全体が読み込まれません。エディター（VS Code など）で $schema を指定しておくと、キーの補完とエラー表示が使えます。
グローバルスタイルの上書き: サイトエディターの「スタイル」で同じ項目を保存していると、そちらが優先されます。スタイル画面の操作メニューからリセットするか、どの値がユーザー側に保存されているかを確認します。リセットは元に戻せないため、事前にバックアップを取ってください。
編集したファイルの場所: 子テーマを有効化しているのに親テーマの theme.json を編集している、またはその逆、というケースは珍しくありません。
キャッシュ: WordPress は theme.json の解析結果をキャッシュします。開発中は wp-config.php で WP_DEVELOPMENT_MODE を theme にすると、テーマ開発向けにキャッシュの一部が無効になります（WordPress 6.3 以降）。本番環境では設定しないでください。ページキャッシュや CDN を使っている場合は、それらの削除も必要です。
個別ブロックの設定: 記事内のブロックで文字サイズを個別に選んでいると、そのブロックは styles の既定値の影響を受けません。

フロントで確認するときは、ブラウザーの開発者ツールで :root に --wp--preset--font-size--large などの変数が出力されているか、clamp() の値が意図どおりかを見ます。PHP 側で実際に有効な設定を確かめたいときは、wp_get_global_settings( array( 'typography', 'fontSizes' ) ) で取得できます。

まとめ

theme.json の settings でエディターに出す選択肢を、styles でサイト全体・要素・ブロックの既定値を決める。
フォントは fontFamilies と fontFace でテーマ内のファイルを登録する。日本語フォントはサイズが大きいため、サブセット化やシステムフォントとの併用を検討する。
文字サイズはプリセット化し、本文は固定、見出しだけ流体タイポグラフィにすると扱いやすい。スラッグは後から変えない。
サイトエディターで保存したスタイル（wp_global_styles）は theme.json より優先される。反映されないときはまずここと構文エラー、キャッシュを確認する。
作業は子テーマで行い、ステージングで確認してから本番へ。バージョン3は WordPress 6.6 以降が前提です（2026年10月現在）。