WordPress のフォント変更 — ブロックテーマでの選び方

書体を変えたいのに設定画面に見当たらない。変えたはずなのに一部にしか効かない。WordPress のフォント変更でつまずく場所は、この 2 つに分かれます。この記事では原因の切り分けから始め、書体と文字サイズを変える 4 つの方法を「更新で消えないか」「引き渡した後に本人が変えられるか」「サイト全体で揃うか」の 3 軸で比べます。仕様は 2026 年 9 月時点のものです。

「フォントが変更できない」の 2 つの原因

「変更できない」には、性質の違う 2 つの状態が混ざっています。対処が別なので、最初にどちらなのかを切り分けてください。

変更する場所が見つからない

設定画面の置き場所は、使っているテーマの種類によって変わります。クラシックテーマではカスタマイザーやテーマ独自の設定画面に置かれていることが多く、ブロックテーマではサイトエディター（外観 > エディター）に集約されています。WordPress 公式ドキュメントの Block themes は、クラシックテーマはサイトエディターでは動かないと明記しています。解説記事のとおりに操作しても画面が出てこない場合は、その記事が想定しているテーマの種類が違う、というだけのことがあります（ブロックテーマとは何か — クラシックテーマとの違いを、乗り換える人の目線でで、設定の置き場所の違いを整理しています）。

ただし、書体そのものを追加する画面は WordPress 7.0 で共通化されました。公式ドキュメントの The Font Library は、フォントライブラリが 7.0 以降、ブロックテーマとクラシックテーマの両方でグローバルに使えると説明しています。場所は管理画面の「外観 > フォント」です。

変えたのに一部にしか効かない／元に戻る

こちらは設定の場所ではなく、設定の持ち方の問題です。原因は大きく 3 つあります。

• ブロック 1 つだけに設定している。 ブロック側で指定した値はそのブロックにしか効きません。サイト全体を変えるなら、テーマ全体の設定側で変える必要があります
• 選択肢そのものがテーマ側で決まっている。 書体と文字サイズの選択肢は、テーマの theme.json が持っています。一覧に出てこない値は選べません
• 書いた CSS が更新で消えた。 テーマのファイルに直接書き足した場合、テーマを更新すると上書きされます

とくに文字サイズは 2 つ目が効いていることが多いので、後半で個別に扱います。

WordPress でフォントを変える 4 つの方法

選択肢はおおまかに 4 つです。優劣は付けず、何が必要なのかという前提だけを並べます。

方法 A — フォントライブラリで追加する

管理画面の「外観 > フォント」から、フォントファイルをアップロードする、または Google Fonts から入れる方法です。WordPress 7.0 以降の機能で、ブロックテーマ・クラシックテーマのどちらでも使えます（出典は前掲の The Font Library）。コードは書きません。追加した書体は一覧に加わり、スタイルの設定から選べるようになります。

方法 B — サイトエディターのスタイルで切り替える

すでにサイトに入っている書体の中から、使う場所を決める方法です。公式ドキュメントは、サイト全体の書体を変えるときは「外観 > エディター > スタイル」へ進むよう案内しています。見出しだけ、段落だけ、といったブロック単位の指定もできます。選べる内容はテーマによって変わります（同ドキュメントも「利用できる選択肢はテーマによる」としています）。

方法 C — theme.json に書く

テーマ側で、使える書体そのものを設計する方法です。グローバル設定とスタイルのタイポグラフィ設定によると、書体は settings.typography.fontFamilies に登録します。必要なのは name（表示名）、slug（CSS カスタムプロパティに使われる識別子）、fontFamily（CSS の font-family に渡る値）の 3 つです。システムフォントはこの 3 つだけで登録でき、ウェブフォントの場合は fontFace を足してフォントファイルの場所を指定します。src には theme.json からの相対パスを書けます。

方法 D — CSS を書く／フォント系のプラグインを使う

CSS で font-family を直接指定する方法と、フォントの追加や指定を担当するプラグインを入れる方法です。どちらも、テーマが用意していない指定を後から足せます。CSS は書く場所によって更新で消えるかどうかが変わり、プラグインは外すと指定も一緒に消えます。

どれを選ぶべきか — 3 つの判断軸

案件や運用体制によって答えは変わります。ひとつに決めつけず、3 軸で並べます。

読者の立場で分けると、次のようになります。

• 自分で作って自分で運用するなら A ＋ B。 管理画面だけで完結し、テーマを更新しても設定が残ります
• 人に渡す前提で作るなら C を先に決めて、A ＋ B を引き渡し後の操作として残す。 選択肢の枠を theme.json で決めておけば、渡した先で崩れる幅が小さくなります。ただし theme.json はテーマ本体のファイルなので、自作テーマか子テーマで持つのが前提です
• D は、A〜C で届かない指定だけに絞る。 1 か所ずつ CSS を足していくと、あとから「どこで何が効いているのか」を追いにくくなります

フォントそのものの利用許諾にも触れておきます。ウェブフォントには、配布や利用の条件がフォントごとに定められています。公式ドキュメントも、アップロードの説明の中でそのフォントを使用・配布する権利があることを確認するよう求めています（出典は前掲の The Font Library）。

フォントライブラリで書体を追加する — 最小の手順

方法 A は、管理画面の「外観 > フォント」で完結します。画面は 3 つのタブに分かれ、それぞれ役割が違います（以下すべて、出典は前掲の The Font Library）。

アップロードできる形式は .ttf / .otf / .woff / .woff2 の 4 つです。そして公式ドキュメントは、この説明の中で「そのフォントを使用・配布する権利があることを確認してください」と明記しています。手元にあるファイルが必ずしもウェブサイトで使える条件とは限らないため、ここは必ず確認してください。

Google Fonts から入れる場合は、先にサイトから Google Fonts へアクセスする許可を与える必要があります。許可したあとは、検索して書体を選び、必要な太さ・スタイルの組み合わせを選んでインストールします。このとき、WordPress は選んだフォントファイルをダウンロードして自分のサイト上にホストします。表示のたびに Google から読み込むのではありません。許可は同じ画面からあとで取り消せます。

追加した書体は「ライブラリ」タブに並び、スタイルの設定からも選べるようになります。使う書体を減らしたいときは、同じタブで対象の有無を切り替えて更新するか、削除します。

なお、ここまでが「書体をサイトに入れる」話です。入れた書体をどこに使うかは方法 B の担当です。

文字の大きさが揃わないとき — fontSizes と流体タイポグラフィ

「書体は変えられたのに、文字の大きさだけ思ったとおりにならない」という詰まりには、はっきりした原因があります。大きさの選択肢は、テーマの theme.json が決めています。

前掲のタイポグラフィ設定のドキュメントによると、WordPress が既定で登録している文字サイズは 4 段階です。

エディターの文字サイズ欄にこの 4 つしか出てこない場合、テーマが独自のサイズを登録していない、ということです。選択肢を差し替えるには settings.typography.fontSizes を書きます（以下は theme.json の抜粋）。

{
	"settings": {
		"typography": {
			"fluid": true,
			"fontSizes": [
				{ "name": "Small", "slug": "small", "size": "14px" },
				{ "name": "Medium", "slug": "medium", "size": "18px" },
				{ "name": "Large", "slug": "large", "size": "24px" },
				{ "name": "Extra Large", "slug": "x-large", "size": "36px" }
			]
		}
	}
}

あわせて知っておきたい設定が 3 つあります。

• 流体タイポグラフィ（settings.typography.fluid）は既定で false です。true にすると、登録済みのサイズが clamp() に置き換わり、画面幅に応じて伸縮します。下限は既定で 14px なので、既定の small（13px）のように下限を下回るサイズは、この伸縮の対象から外れます
• customFontSize は既定で true です。選択肢にない数値を利用者が直接入力できるかどうかの設定で、false にすると入力欄が出なくなります
• カスタムの文字サイズが 5 つを超えると、UI がボタンの並びからドロップダウンに変わります。選択肢を増やすほど選びやすくなるとは限らないので、段階の数は先に決めておくほうが無難です

テーマ側の設定が編集画面の選択肢を決めているという構図は、フォントに限った話ではありません。同じ構図はカスタムフィールドが表示されない — ブロックテーマの原因と対処でも扱っています。

書体を選ぶ前に — サイト全体で揃える方法を先に決める

「どの書体にするか」より先に、「どうやって全体で揃えるか」を決めたほうが、あとの作業は短くなります。

1 か所ずつ指定していく進め方は、最初の 1 ページは速いものの、ページが増えるほど例外が増えます。見出しと段落の大きさの関係、文字サイズと余白の関係が、ページごとにずれていきます。対して、サイズと書体をプリセットとして持ち、そこから選ぶ形にしておけば、選択肢の外に出ない限り全体が揃います。theme.json の fontSizes や fontFamilies は、そのための仕組みです。

プリセットの決め方には、自分で設計する場合と、既製の設計から選ぶ場合があります。

• 自分で設計する場合は、案件ごとの要件に合わせて段階も比率も自由に決められます。そのかわり、段階の数・各段階の値・余白との対応を自分で決めて、残しておく必要があります
• 既製の設計から選ぶ場合は、決める手間が省けるかわりに、用意された枠の中に収めることになります。枠から外れる要求が案件にある場合は、結局書き足すことになります

後者の例としては、テーマ側がスケールを持っている構成があります。たとえば shitate は、8 つのタイプスケール（短 2 度から黄金比まで）から 1 つ選ぶと、文字サイズと余白が連動して全体で揃う設計です。基準を 16px、比率の初期値を 1.25 として連鎖的に生成し、8 段階（xxs〜xxxl）で文字と余白を統一します。どちらが向いているかは、案件の自由度と、引き渡し後に誰が触るかで変わります。

WordPress のフォント変更は、書体を入れる話（方法 A）、どこに使うかを決める話（方法 B）、選択肢そのものを設計する話（方法 C）、枠の外を埋める話（方法 D）に分かれます。「変更できない」と感じたときは、場所が見つからないのか、設定が一部にしか効いていないのかを先に切り分けてください。そのうえで、更新で消えないか、引き渡し後に本人が変えられるか、サイト全体で揃うか。この 3 つを当てはめれば、選ぶべき方法は絞り込めます。

shitate は 100% GPL のブロックテーマで、WordPress 公式ディレクトリから無料で試せます。詳細は公式サイトをご覧ください。