目次
- はじめに｜フォントを変えるだけで「それっぽいサイト」になる。でも沼もある
- CSSでフォントを変更するとは
- フォント変更の基本はfont-family（まずはこれだけ覚える）
- font-familyのルール（ここを押さえると一気に迷わなくなる）
- ルールは3つだけ
- 汎用ファミリーって何？
- 日本語フォントの指定が難しい理由（仕組みを先に理解する）
- 日本語フォント指定のおすすめ例（迷ったらこれ）
- この並びの意図（ざっくり）
- ゴシック体と明朝体の使い分け（どっちが正解？のモヤモヤを消す）
- ゴシック体（本文・UIで困りにくい）
- 明朝体（雰囲気は強いけど、使い所がある）
- 部分的にフォントを変える（やりすぎないのがコツ）
- ありがちな失敗
- Webフォント（Google Fonts）でフォントを変える方法
- CSSだけで指定する例
- Google Fontsの導入（手順をそのままやればOK）
- HTMLで読み込む（よくある形）
- CSSで指定
- Webフォントの注意点（ここが実務の差になる）
- 読み込みが増えると遅くなる
- FOIT / FOUT（フォントが一瞬ガタつくやつ）
- フォント変更が反映されない原因（よくある順で潰す）
- フォント名の記述ミス
- CSSが読み込まれていない
- 別のCSSで上書きされている
- font-familyを指定している場所がズレている
- DevToolsで「実際に何のフォントが使われてるか」を確認する（差別化ポイント）
- 手順
- スマホ表示での注意点（太く見える・大きく見える問題）
- チェックリスト｜フォント変更で迷ったらここを見る
- まとめ｜フォントは「指定の型」を持つと一気に楽になる
はじめに｜フォントを変えるだけで「それっぽいサイト」になる。でも沼もある
Webサイトを作っていると、
「なんかダサい」「雰囲気が出ない」って瞬間が来ます。
レイアウトをいじる前に、フォントを変えると一気に化けることがあります。
でも、フォント変更は地味に落とし穴も多いです。
- フォントを変えたのに反映されない
- PCとスマホで見え方が違う
- 日本語フォントの指定がややこしい
- Webフォント入れたら表示が遅くなった
私も昔、Google Fontsを入れて「お、いい感じ！」となった直後に、
スマホで見たら読み込みが遅くて表示が一瞬ガタつきました。
フォントって、見た目だけじゃなく体験にも直撃します。
この記事では「css フォント 変更」で検索してきた人が、
基本 → 日本語の指定 → Webフォント → 反映されない原因 → DevTools確認まで一気に進めるようにまとめます。
CSSでフォントを変更するとは
スニペット向けに一文でまとめます。
CSSでフォントを変更するとは、font-familyで使用する書体を指定し、文字の印象や読みやすさを調整することです。
フォントを変えると、こういう変化が出ます。
- 読みやすさが変わる
- サイトの雰囲気（柔らかい/堅い/高級感）が変わる
- 見出しの迫力が出る
フォント変更の基本はfont-family（まずはこれだけ覚える）
最小の書き方はこれです。
body {
font-family: Arial, sans-serif;
}body に指定すると、基本的にページ全体に効きます。
font-familyのルール（ここを押さえると一気に迷わなくなる）
よく使う形がこれです。
body {
font-family: "Helvetica Neue", Arial, sans-serif;
}ルールは3つだけ
- 左から順に探して、使えるフォントがあればそれが採用される
- 空白があるフォント名は
" "で囲む（例："Yu Gothic"） - 最後は汎用ファミリーで締める（
sans-serif/serifなど）
汎用ファミリーって何？
ざっくり言うと「端末にある無難なやつを使ってね」という保険です。
sans-serif：ゴシック系（画面向き、本文でよく使う）serif：明朝系（雰囲気は出る、本文は好みが分かれる）monospace：等幅（コード表示など）
日本語フォントの指定が難しい理由（仕組みを先に理解する）
日本語フォントは「これを指定すれば全員同じ」になりにくいです。
理由はシンプルで、OSごとに入っているフォントが違います。
- Windowsで見えるフォント
- macOSで見えるフォント
- スマホ（iOS/Android）で見えるフォント
だから日本語は「フォールバック（保険）前提」で書くのが基本です。
日本語フォント指定のおすすめ例（迷ったらこれ）
まず無難で現場で困りにくい形です。
body {
font-family:
"Hiragino Kaku Gothic ProN",
"Yu Gothic",
"Meiryo",
sans-serif;
}この並びの意図（ざっくり）
- mac系に強いフォント → Windowsでよく見るフォント → 最後は保険
- 端末差が出ても破綻しにくい
ゴシック体と明朝体の使い分け（どっちが正解？のモヤモヤを消す）
ゴシック体（本文・UIで困りにくい）
body {
font-family: "Yu Gothic", "Meiryo", sans-serif;
}- 文字が読みやすい
- UI（ボタン/メニュー）も馴染む
- サイト全体が安定する
明朝体（雰囲気は強いけど、使い所がある）
body {
font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}- 落ち着いた印象、読み物っぽい
- ただし細く見えて読みにくい端末もある
- 本文全部より「見出しだけ」で使うと扱いやすい
部分的にフォントを変える（やりすぎないのがコツ）
見出しだけ雰囲気を変えるのはよくやります。
body {
font-family: "Yu Gothic", "Meiryo", sans-serif;
}
h2, .catch {
font-family: Georgia, "Times New Roman", serif;
}ありがちな失敗
フォントを3種類も4種類も使うと、逆にチグハグになります。
基本は「本文1つ＋見出し1つ」くらいがちょうどいいです。
Webフォント（Google Fonts）でフォントを変える方法
「全員に同じ雰囲気で見せたい」ならWebフォントが強いです。
代表がGoogle Fonts。
CSSだけで指定する例
body {
font-family: "Noto Sans JP", sans-serif;
}Google Fontsの導入（手順をそのままやればOK）
HTMLで読み込む（よくある形）
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">CSSで指定
body {
font-family: "Noto Sans JP", sans-serif;
}Webフォントの注意点（ここが実務の差になる）
読み込みが増えると遅くなる
使うウエイト（太さ）を増やすほど読み込みが増えます。
- まずは
400と700くらいで十分 - 「念のため全部」はやめた方がいいです
FOIT / FOUT（フォントが一瞬ガタつくやつ）
Webフォントは読み込み中、表示が切り替わることがあります。
Google Fontsの display=swap は、この違和感を減らすための設定です。
フォント変更が反映されない原因（よくある順で潰す）
フォント名の記述ミス
空白がある場合は " " が必要です。
font-family: Yu Gothic;こう書くと、環境によっては扱いがズレます。
基本はこう。
font-family: "Yu Gothic";CSSが読み込まれていない
<link rel="stylesheet" href="style.css">- パスが合ってるか
- ファイル名のスペルが合ってるか
- キャッシュで古いCSSを見てないか（Ctrl + F5）
別のCSSで上書きされている
body {
font-family: Arial, sans-serif;
}
.article {
font-family: serif;
}.article の中は明朝になります。
「反映されない」じゃなくて「別の指定が勝ってる」パターンです。
font-familyを指定している場所がズレている
よくあるのがこれ。
bodyじゃなくて.containerだけに指定していた- 見出しは別CSSで上書きされていた
DevToolsで「実際に何のフォントが使われてるか」を確認する（差別化ポイント）
反映されないときは、DevToolsが最短です。
手順
- Chromeでページを開く
- F12 → Elements
- フォントを確認したい文字を選択
- 右側の Styles で
font-familyを探す - Computed で最終的な
font-familyを確認する
打ち消し線が付いていたら、その指定は負けています。
「どれが勝ってるか」を見るのがコツです。
スマホ表示での注意点（太く見える・大きく見える問題）
スマホだと「同じフォントでも太く見える」「妙に大きく感じる」ことがあります。
そんなときは、フォントサイズだけでなく行間もセットで見ます。
body {
font-size: 16px;
line-height: 1.7;
}
@media (max-width: 768px) {
body {
font-size: 15px;
line-height: 1.75;
}
}サイズだけ下げるより、行間を少し広げる方が読みやすいことが多いです。
チェックリスト｜フォント変更で迷ったらここを見る
font-familyは左から順に適用されるのを理解しているか- 最後に
sans-serif/serifを入れているか - 日本語は複数指定でフォールバックを用意しているか
- Webフォントは太さ（wght）を増やしすぎていないか
- 反映されないときはDevToolsで「勝ってる指定」を見たか
まとめ｜フォントは「指定の型」を持つと一気に楽になる
CSSでフォントを変更する流れはシンプルです。
- 基本は
font-family - 日本語は複数指定で保険をかける
- 雰囲気を統一したいならWebフォント
- 反映されないときは上書きや読み込みを疑う
- DevToolsで最終的な適用フォントを見る
「css フォント 変更」で検索してきたなら、
まずは body に font-family を指定して、
見出しだけアクセントを足すところから始めると失敗しにくいです。