「フォントを変更したのに、なぜか反映されない…」
そんな経験はありませんか？
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点を中心に確認すれば、ほとんどの問題は解決できます。
ご相談・お見積もりは無料です。まずはお気軽にご連絡ください。
act styleでは、デザイン性はもちろん、表示速度やSEO対策にも配慮したレスポンシブWebデザインを標準仕様として採用していますので、パソコン・スマートフォン・タブレットなど、さまざまな端末から快適に閲覧できるホームページを制作いたします。
「ホームページの新規制作」「ホームページのリニューアル」どちらのご要望にも対応可能です。ホームページ制作に関するご相談やご質問なども、お気軽にお問い合わせください。
「まだ制作するか決まっていない」「まずは話だけ聞いてみたい」という場合でも大丈夫です。しつこい営業は一切ありません。どうぞお気軽にご相談ください。
