CSSのフォント指定は、利用したい書体を先頭に書き、最後にsans-serifやserifなどの総称ファミリーを置きます。日本語Webフォントはファイルが大きくなりやすいため、必要なウェイトだけ読み込み、表示速度も確認します。
情報確認日：2026年8月22日
結論：まず押さえるポイント
この記事の結論
- font-familyは優先順に複数指定する
- フォント名に空白がある場合は引用符で囲む
- 最後に総称ファミリーを置く
- Webフォントはウェイト・文字集合・font-displayを最適化する
CSSでフォントを指定する方法の基本
ブラウザは先頭のフォントから順に、端末で利用できるものを選びます。日本語と英数字で別のフォントが選ばれることもあるため、Windows、macOS、iOS、Androidで確認します。
system-uiはOSのUIフォントを使うキーワードです。読み込みが速く、管理画面やツール系UIに向きます。
CSSで指定できるフォントの種類（総称ファミリー）
CSSのフォントの種類は、具体的なフォント名と総称ファミリーの2層で考えます。総称ファミリーはブラウザが必ず何かを割り当てる予備のキーワードで、主に次の5つです。
sans-serif：ゴシック体。日本語のWeb本文の標準serif：明朝体。長文や見出しの雰囲気づくりmonospace：等幅。コードや数値の桁揃えcursive：筆記体・手書き風fantasy：装飾的な書体
これに加えてsystem-uiやui-monospaceなどOSのUIフォントを指す値もあります。HTMLの<font>タグは廃止されているため、フォントはHTMLではなくCSSのfont-familyで指定します。
最小の実装例
HTML
<body>
<h2>読みやすい見出し</h2>
<p>本文は端末の日本語サンセリフで表示します。</p>
</body>CSS
body {
font-family:
"Hiragino Kaku Gothic ProN",
"Yu Gothic",
Meiryo,
sans-serif;
line-height: 1.8;
}
code {
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}書体だけでなく行間や1行の長さも読みやすさに影響するため、日本語の本文では行間を詰めすぎないようにします。
実務で使うときの考え方
Webフォントを読み込む
@font-face { font-family: "Site Sans"; src: url("/fonts/site-sans.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }ライセンスを確認し、WOFF2などWeb向け形式を使います。太字を使うなら本物の700ウェイトを用意するか、合成表示が許容できるか確認します。
可変フォント
可変フォントは1ファイルで複数ウェイトを表せます。対応範囲とファイルサイズを比較し、通常フォントより必ず軽いとは限らない点に注意します。
表示速度とレイアウトシフトを抑える
Webフォント読み込み前後で文字幅が変わると、改行やボタン幅がずれます。フォールバックの字幅が近い書体を選び、必要ならsize-adjustなど、フォールバック書体の文字サイズを補正するプロパティを検討します。本文すべてを装飾フォントにするより、見出しだけに限定する方が軽量です。
よくある失敗と直し方
font-weight:700なのに太くならない
700のフォントファイルが読み込まれているか、@font-faceのfont-weight指定が合っているか確認します。
日本語だけ別の書体になる
指定フォントが日本語グリフを持たず、次のフォントへフォールバックしています。意図した組み合わせか確認します。
Webフォントが一瞬消える
font-displayとキャッシュ、preloadを確認します。preloadしすぎると他の重要リソースを遅らせます。
font-familyを書いたのに反映されない
フォント名の綴りや引用符の前に、別のセレクタの指定に負けていないかを確認します。ブラウザの開発者ツールで打ち消し線が付いていれば、CSSの詳細度の高い指定が優先されています。
WordPressで使う場合
WordPressテーマでは、フォントCSSを適切にenqueueし、外部フォントサービスを使う場合はプライバシー、同意、地域要件、障害時のフォールバックも確認します。ブロックテーマではtheme.jsonのタイポグラフィ設定と公開CSSを揃えます。
よくある質問
日本語フォント名は日本語で書けますか？
環境依存を避けるため、一般にはPostScript名や英語名を使い、空白を引用符で囲みます。
remとpxはどちらで文字サイズを指定しますか？
本文やUIはユーザー設定に追従しやすいremが基本です。デザイン上の基準とズーム時の可読性を確認します。画面幅に応じて文字サイズを滑らかに変えたい場合は、calc()とclamp()で最小値と最大値を決めます。
Google Fontsはそのまま読み込んでよいですか？
利用条件、プライバシー、必要ウェイト、配信速度を確認します。自己ホストが適切な場合もあります。
まとめ
font-familyは優先順と総称ファミリーを設定し、端末差を前提にします。Webフォントは必要な文字とウェイトだけに絞り、読みやすさ、速度、レイアウトシフト、ライセンスをまとめて確認してください。