この記事では一部分を中心に解説しています。
全体像や関連知識もあわせて理解したい方は、以下の記事もぜひご覧ください。
「フォントを変更したのに、なぜか反映されない…」
そんな経験はありませんか？
WordPressやHTML・CSSでフォントを設定しても、思い通りに表示されないことはよくあります。
実はこれ、いくつかの“よくある原因”があります。
この記事では、フォントが反映されない原因をわかりやすく整理し、初心者の方でもすぐにできる対処法を解説します。
フォントが反映されない主な原因
CSSが正しく書かれていない
最も多い原因が、CSSの記述ミスです。
body {
font-family: "Noto Sans JP", sans-serif;
}
- セミコロン（;）の付け忘れ
- クォーテーションの抜け
- スペルミス
など、小さなミスでも反映されません。
CSSの優先順位に負けている
別のCSSに上書きされているケースです。
body { font-family: sans-serif; }
p { font-family: serif; }
この場合、pタグ内はserifが優先されます。
対処方法
- 開発者ツールで確認
- より具体的なセレクタにする
Webフォントが読み込まれていない
Google Fontsなどを使っている場合、読み込みが必要です。
▼ ① headに追加してください（コピペOK）
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
※WordPressの場合は、<head>内（header.php）またはfunctions.phpに記述します。
▼ ② CSSにフォントを指定（コピペOK）
body {
font-family: "Noto Sans JP", sans-serif;
}
この2つをセットで行うことで、フォントが正しく反映されます。
キャッシュが残っている
変更が反映されない原因で非常に多いのがキャッシュです。
対処方法
- ブラウザのキャッシュ削除
- Ctrl + F5で強制リロード
- WordPressのキャッシュプラグインをクリア
フォント名が間違っている
フォント名は正確に書く必要があります。
例：
❌ NotoSansJP
⭕ “Noto Sans JP”
font-familyの順番が不適切
フォールバックの順番も重要です。
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
テーマのCSSに上書きされている（WordPress）
WordPressではテーマのスタイルが優先されることがあります。
対処方法
body {
font-family: "Noto Sans JP", sans-serif !important;
}
- 追加CSSに記述する
- !importantを使う（最終手段）
読み込み順の問題
CSSの読み込み順によっては、後から読み込まれたCSSが優先されます。
フォントファイル自体が存在しない
ローカルフォントや自作フォントの場合、パスミスが原因になります。
ブラウザ対応の問題
古いブラウザでは一部フォントが表示されないこともあります。
すぐできるチェックリスト
- CSSは正しく書かれているか
- フォントは読み込まれているか
- キャッシュは削除したか
- 優先順位で負けていないか
- フォント名は正しいか
初心者におすすめの設定（コピペOK）
body {
font-family:
"Noto Sans JP",
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
"Yu Gothic",
Meiryo,
sans-serif;
}
まとめ
フォントが反映されない原因は、実はシンプルなものがほとんどです。
- CSSのミス
- キャッシュ
- 優先順位
この3点を中心に確認すれば、ほとんどの問題は解決できます。
表示速度改善のご相談・診断は無料です。
サイト表示速度は、SEO・ユーザー離脱率・CV率にも大きく影響します。
画像最適化・CSS/JS最適化・サーバー設定など、原因は多岐にわたります。
act styleでは、WordPressやEC-CUBEの表示速度改善にも対応しています。
「サイトが重い」と感じたら、まずはお気軽にご相談ください。
今回解説した内容に関連するテーマは、以下の記事でも詳しく解説しています。
理解を深めたい方は、あわせてご覧ください。
このテーマを正しく理解するための基礎知識
この記事の理解を深めるための補足情報です。
関連する重要なポイントや基礎知識を整理してまとめています。