ホームページの文字の形がページごとに違って見える原因｜テーマと編集ツールで指定が2系統になる仕組みと、1回で揃わないときの手順
ホームページの文字の形がページごとに違って見える原因｜テーマと編集ツールで指定が2系統になる仕組みと、1回で揃わないときの手順
トップページと下層ページで、文字の形がなんとなく違う。メニューとフッターだけ細く見える。問い合わせフォームの項目名だけ字面が浮いている——。レイアウトが崩れているわけではないので指摘しづらく、それでいて一度気づくと気になり続ける。ホームページの書体（フォント）の不統一は、そういう性質のトラブルです。
先に結論を書きます。
サイト内で書体が揃わない原因のほとんどは、フォントの指定が「テーマ側」と「ページ編集ツール側」の2系統に分かれて存在していることです。そのため、CSSでサイト全体に1行当てる方法では揃いません。正しい手順は、①揃える対象の書体を先に決める、②全ページを機械的に測って不一致の要素を洗い出す、③2系統それぞれに上書きを当てる、④再測定して不一致0を確認する——の4段階です。
この記事では、名古屋のWEB制作会社graciautoが、既存テーマ＋ページビルダーで作られた首都圏の幼児教育スクールのサイトを改修したときの実測値をもとに、原因の仕組みと直し方をまとめます。触るのはCSSだけで、ページデータには手を入れません。
結論：フォントは「サイト全体に1回当てる」では揃わない
書体の不統一を直そうとするとき、最初に思いつくのは次の1行です。
body { font-family: "Noto Sans JP", sans-serif; }これが有効なのは、サイトのHTMLが1系統で作られている場合だけです。日本の中小規模サイトで多い「有料テーマ＋ページビルダー（Elementorなど）」の構成では、画面に出ている文字が2つの別々の仕組みから出力されています。
| 出所 | 該当する場所 | 指定されやすいフォント |
|---|---|---|
| テーマ本体 | グローバルメニュー、フッター、記事一覧・アーカイブ、投稿カード | Arial, ヒラギノ角ゴ ProN W3, ... のような欧文優先スタック |
| ページビルダー | 各ページの本文、見出し、画像＋説明のブロック、フォーム | ウィジェット単位で個別指定（Roboto など） |
実際に改修したサイトを計測したところ、まさにこの状態でした。ページビルダーで組まれた本文は "Noto Sans JP", sans-serif、テーマが出力するメニュー・フッター・お知らせカード・アーカイブは Arial, ヒラギノ角ゴ ProN W3, ...。つまり1つの画面の中で2種類のフォント指定が同時に動いていたわけです。
ここで効いてくるのは、これらが「日本語フォントの指定ではない」ことです。Arial や Roboto は欧文書体で、日本語の文字（グリフ）を持っていません。ブラウザは指定にない文字を、その先に並んだ書体や端末の初期設定から自動で補います。これがフォールバックで、日本語部分だけが指定と無関係な書体で表示される理由です。
「文字の形がページごとに違う」の正体は、多くの場合この置き換えです。だから次の2つが同時に起こります。
- 見た目は崩れない（文字は読めるしレイアウトも保たれる）ため、公開後も気づかれず残りやすい
- 端末によって違って見える（Mac と Windows で補われる書体が違う）ため、「自分の画面では普通です」という食い違いが起きる
対処は、2系統それぞれに日本語書体を含む指定を当て直すことです。片方だけでは必ず残ります。
なぜ「body に当てたのに効かない」が起きるのか
body への一括指定が効かない理由は2つあり、順番に潰す必要があります。
理由1：CSSの読み込み順で後から上書きされる
CSSは、優先度が同じなら後に読まれた方が勝ちます。追加したCSSがテーマのCSSより先に読み込まれていると、せっかくの指定はテーマ側に上書きされます。
WordPressでは、CSSを読み込ませる順番は登録時の「優先度」という数値で決まります。ここを大きめの値にしてテーマより後に読み込ませるのが定石です。実例では優先度 30 で登録していたために当初は反映されず、9999 へ上げて読み込み順を最後にしたことで解決しました。
// テーマより後に読み込ませる（数値が大きいほど後）
add_action( 'wp_enqueue_scripts', 'my_font_css', 9999 );理由2：詳細度（セレクタの強さ）で負ける
読み込み順を最後にしても、まだ効かない箇所が残ります。CSSは読み込み順より先に詳細度で勝敗が決まるためです。body はもっとも弱い指定なので、.elementor-field-label のようなクラス指定には常に負けます。ページビルダーは各ウィジェットにこうしたクラスを付けてフォントを指定するので、body への指定は構造的に届きません。
ページビルダーが入っているサイトでは、「body 指定は効かない前提」で始めるのが正解です。 詳細度の数え方や、どの指定に負けているかを開発者ツールで特定する手順はCSSが一部だけ効かないときに見るところにまとめています。あわせて、そもそも変更がブラウザまで届いていない場合の切り分けはWordPressでCSSを直したのに反映されないときを参照してください。
実測：取りこぼしが残りやすい5つの場所
body への指定と読み込み順の調整を行うと、本文の大半は揃います。ここで作業を終わらせると危険で、ウィジェット固有のクラス指定を持つ箇所だけが取り残されます。
実例のサイトで、全ページを測り直したときに残っていたのは次の5箇所でした。いずれも「文字量が少なく、目視で流されやすい場所」に集中しています。
| 残りやすい箇所 | 当たっていた指定 | 実際の見え方 |
|---|---|---|
| 特集ページの本文・項目ラベル | .elementor-image-box-description / .elementor-icon-list-text が Roboto |
日本語がフォールバック表示 |
| テーマの装飾クラス | .rich_font が Times New Roman ＋ 游明朝 |
見出しだけ明朝体 |
| フッターの電話番号 | #footer_tel .number が明朝系 |
数字だけ字面が違う |
| 問い合わせフォームの項目名すべて | .elementor-field-label が Roboto |
入力欄の見出しだけ浮く |
| 投稿カードのバッジ・一部の見出し | .elementor-post__badge ほか |
カテゴリ表示だけ別書体 |
この5箇所はそのサイト固有の話ではありません。「本文以外」「短い文字列」「フォーム・カード・バッジのような部品」という共通点があり、同じ構成なら同じ場所に残ります。チェックすべき場所は先に絞り込めます。
- 問い合わせフォームのラベル・プレースホルダ・送信ボタン
- 記事カードやバッジなど、一覧に並ぶ小さな部品
- フッターの電話番号・住所・コピーライト
- テーマ独自の装飾クラス（明朝体が混ざりやすい）
- 画像＋説明文のブロック、アイコン付きリストの本文
手順：不一致0を確認するまでが作業
1. 揃える対象を先に決める
全部を1書体にするのが正解とは限りません。実務では次のように分けます。
- 日本語の地の文・見出し：1書体に統一する（例：Noto Sans JP）
- 英字の装飾見出し（
ABOUTMESSAGECONTACTなど）：デザインの一部なのであえて残す - 明朝体を使っている箇所：意図的なデザインか、テーマが勝手に当てているのかを確認して判断する
実例でも、英字の装飾見出しに使われていた欧文書体2種類は残置しました。ここを機械的に潰すと、デザインの意図まで消えてしまいます。「揃える」の定義は、日本語を含む要素の書体が指定どおりであることと置くのが実務的です。
2. 現状を機械的に測る
目視で探すのは非効率なうえ、見落とします。ブラウザの開発者ツールのコンソールで、日本語を含むのに目標フォントになっていない要素を数える方法が確実です。
// 各ページで実行し、不一致リストを出す
const target = 'Noto Sans JP';
const bad = [...document.querySelectorAll('*')].filter(el => {
const t = el.textContent.trim();
if (!/[ぁ-んァ-ヶ一-龥]/.test(t)) return false; // 日本語を含む要素だけ
if (el.children.length) return false; // 末端の要素だけ数える
return !getComputedStyle(el).fontFamily.includes(target);
});
console.log(bad.length, bad.map(el => [el.className, getComputedStyle(el).fontFamily]));getComputedStyle で実際に適用された値を見るのが要点です。CSSファイルを読んで判断すると、上書き関係を読み違えます。
3. 2系統それぞれに上書きを当てる
測定で出たクラス名をそのまま上書き対象にします。テーマ側の装飾クラスとページビルダーのウィジェットクラスを分けて書くと、後から意図が分かります。
/* ページビルダーのウィジェット固有指定 */
.elementor-field-label,
.elementor-image-box-description,
.elementor-icon-list-text,
.elementor-post__badge { font-family: "Noto Sans JP", sans-serif !important; }
/* テーマ側の装飾クラス */
.rich_font,
#footer_tel .number { font-family: "Noto Sans JP", sans-serif !important; }!important は乱用すべきではありませんが、外部のテーマやプラグインの出力を、相手のファイルを触らずに上書きする場面では妥当な選択です。使う範囲を「測定で不一致が出たセレクタだけ」に限定すれば、後から追える状態を保てます。
4. 全ページで再測定する
指摘された1ページだけを直して完了とすると、取りこぼしが残ります。全ページで手順2を回し、不一致0を確認して初めて完了です。
実例のサイト（9ページ）の最終実測は次のとおりでした。
| ページ | 統一書体の適用要素数 | 残っている別書体 | 日本語の不一致 |
|---|---|---|---|
| トップ | 66 | 英字装飾 5 | 0 |
| 教育方針 | 50 | — | 0 |
| 選ばれる理由 | 39 | 英字装飾 2 | 0 |
| 代表挨拶 | 56 | 英字装飾 2 | 0 |
| クラス紹介 | 70 | — | 0 |
| 見学予約 | 38 | 英字装飾 1 | 0 |
| 入学案内 | 41 | — | 0 |
| アクセス | 41 | — | 0 |
| 講師紹介 | 22 | — | 0 |
残っている別書体は WHO WE ARE MESSAGE CONTACT といった英字の装飾見出しで、手順1で残すと決めたものです。「不一致0件・意図的な残置◯件」と報告できる状態が、この作業のゴールです。
起こりやすい失敗と避け方
この作業には、静かに失敗するパターンがいくつかあります。いずれも予防できます。
代表ページだけを測って完了とする。 2ページで不一致0になっても、他のページには別のウィジェットが使われています。フォームのあるページ、一覧ページ、テーマの装飾クラスを使うページは、性質が違うので必ず個別に測ってください。
自分の画面で確認して終わりにする。 制作側の端末は日本語フォントが多く入っているため、フォールバックしても違和感が小さいことがあります。判断は目視ではなく getComputedStyle の値で行います。
最初から全体に !important を付ける。 一時的には揃いますが、後日デザインを部分調整するときに上書きできなくなります。当てる範囲は測定結果に限定します。
Webフォントの読み込みを増やしすぎる。 日本語のWebフォントは容量が大きく、太さ（ウェイト）を増やすほど表示速度に響きます。使うウェイトは2〜3種類に絞ってください。
テーマの入れ替えで解決しようとする。 書体の不統一を理由にテーマを変更すると、ページビルダーで組んだレイアウトが広範囲に崩れます。CSSの上書きで済む問題に対しては手段が大きすぎます。既存構成を保ったまま改修する考え方はWordPressのテーマを変えずにデザインを今風にする方法にまとめています。
よくある質問
Q. 制作会社に「直してほしい」と伝えるとき、何と言えばいいですか。
「ページごとに書体が違う」だけだと、どこを指すのか伝わりません。「日本語部分の書体を◯◯に統一してほしい。英字の装飾見出しは今のままでよい」と、対象と例外を分けて伝えてください。さらに「全ページで確認してほしい」と添えると、代表ページだけの対応を防げます。
Q. 直したはずなのに、まだ違って見える場所があります。
フォームのラベル、記事カードのバッジ、フッターの電話番号を見てください。文字数が少ないぶん取りこぼされやすい3箇所です。開発者ツールで該当箇所を検証し、font-family に当たっているセレクタを見れば上書き対象が分かります。
Q. スマホだけ違って見えるのですが、同じ原因ですか。
書体そのものが違うなら同じ原因（端末ごとのフォールバック差）です。文字が重なる・はみ出す症状なら別問題で、スマホだけ文字が重なる原因で扱っています。
まとめ
ホームページの文字の形がページごとに違って見えるのは、テーマとページ編集ツールでフォントの指定が2系統に分かれているためです。片方だけを直しても、もう片方が残ります。
- 原因は2系統の混在と、欧文フォント指定による日本語のフォールバック
bodyへの一括指定は、読み込み順と詳細度の2段階で負けるため効かない- 取りこぼしはフォーム・カード・フッター・装飾クラスという決まった場所に残る
- 完了の基準は感覚ではなく、全ページで日本語の不一致0を実測すること
見た目が崩れないぶん放置されやすい問題ですが、書体の揺れはサイト全体の印象を下げます。測る手順さえ決めれば、統一は機械的に終わらせられます。
graciautoでは、既存のホームページに手を入れずに表示や導線を改善する改修も承っています。書体の不統一を含め、気になる箇所があればお気軽にご相談ください。