【CSS】font-family一覧と目的別おすすめ指定例！注意点は？

CSSで文字の雰囲気を変えたいときに使うのがfont-familyです。しかし、「どのフォント名を書けばいいの？」「日本語フォントはどう指定する？」「指定したのに反映されない」と迷う方も多いはずです。font-familyは、表示したいフォントを優先順に並べて指定するCSSプロパティです。先頭のフォントが使えない場合は、次の候補へ順番に切り替わります。

この記事では、よく使うフォントの種類、実務で使いやすい指定例、日本語フォントの注意点、font-familyが効かない原因まで解説します。

CSSのfont-familyとは？

font-familyとは、Webページの文字に使うフォントを指定するCSSです。

body {
  font-family: Arial, sans-serif;
}

この例では、まずArialを使い、Arialが利用できない環境ではsans-serif系のフォントに切り替わります。

複数のフォントをカンマで並べる

font-familyは、複数の候補をカンマ区切りで書きます。

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
}

ブラウザは左から順に使えるフォントを探します。ユーザーのPCやスマホに入っていないフォントは使えないため、最後に汎用フォントを置くのが基本です。

font-familyでは、最後にserifやsans-serifなどの汎用フォントを書いておくと、表示崩れを防ぎやすくなります。

なぜ複数のフォントを指定するのか？OS別の標準フォント一覧

font-familyに複数の候補をカンマ区切りで書く理由は、Windows、Mac、iPhone、Androidで「最初から入っている日本語フォント」が全く異なるからです。

主要なOSに標準搭載されている代表的な日本語フォントの対応表は以下の通りです。

OS	標準のゴシック体フォント	標準の明朝体フォント
Windows 10/11	遊ゴシック (Yu Gothic), メイリオ (Meiryo)	遊明朝 (Yu Mincho)
macOS / iOS	ヒラギノ角ゴ (Hiragino Sans / Hiragino Kaku Gothic ProN)	ヒラギノ明朝 (Hiragino Mincho ProN)
Android	Noto Sans CJK JP (Roboto)	※デバイスにより異なる（明朝体は未搭載多め）

例えば、Mac専用の「ヒラギノ角ゴ」だけを指定してしまうと、Windowsユーザーの画面ではブラウザの初期フォント（少し無骨なフォント）で表示されてしまいます。これを防ぐために、どの端末で開いても綺麗に表示されるよう、左から優先順位をつけて並べる必要があります。

スペースを含むフォント名は引用符で囲む

フォント名にスペースが含まれる場合は、ダブルクォーテーションまたはシングルクォーテーションで囲みます。

.text {
  font-family: "Times New Roman", serif;
}

フォント名のスペルミスや引用符の付け忘れは、font-familyが効かない原因になります。特に日本語フォント名やスペースを含む名前は丁寧に確認しましょう。

よく使うfont-family一覧

font-familyで使うフォントは、大きく「具体的なフォント名」と「汎用フォント」に分けられます。

種類	特徴	よく使う場面
sans-serif	装飾の少ないゴシック体・サンセリフ系	Webサイト全般、本文、UI
serif	文字の端に飾りがある明朝体・セリフ系	読み物、上品な印象の見出し
monospace	すべての文字幅が同じ	コード、数値、管理画面
system-ui	OSの標準UIフォントを使う	管理画面、アプリ風UI
cursive	手書き風	装飾的な見出し
fantasy	装飾性の強いフォント	ロゴ風の短い文字

日本語サイトで使いやすい指定例

日本語サイトでは、英字フォントだけでなく日本語フォントまで考えて指定することが大切です。

body {
  font-family:
    "Helvetica Neue",
    Arial,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    Meiryo,
    sans-serif;
}

この指定では、英数字はHelvetica NeueやArial、日本語はmacOSやWindowsの代表的なゴシック体にフォールバックしやすくなります。

日本語サイトでは、英字フォントだけでなく、Hiragino Sans、Yu Gothic、Meiryoなど日本語環境の候補も入れておくと安全です。

【目的別】2026年のWeb制作で使えるおすすめfont-family指定例

実務でそのまま使える、ブラウザやOSごとの表示を最適化した最新の指定例です。デザインの方向性に合わせてコピペしてご活用ください。

① システムフォントを活かした高速・モダンゴシック（標準的なサイト）

macOSの「Hiragino Sans」とWindowsの「Yu Gothic」をベースに、スマホでの表示も最適化した万能なゴシック体の指定です。

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

ポイント: -apple-system や BlinkMacSystemFont を先頭に入れることで、Apple製品（MacやiPhone）のシステムフォントを最優先で適用し、サイトの表示速度と美しさを両立させます。

② クラシカル・高級感を演出する明朝体指定（コーポレート・和風サイト）

信頼感や上品さ、伝統的な雰囲気を演出したいサイトに最適な指定です。

body {
  font-family: "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

③ 視認性・アクセシビリティ重視！UDフォント指定（官公庁・医療・教育サイト）

2026年現在のWeb制作において非常に重要視されているのが、ユニバーサルデザイン（UD）フォントの採用です。Windows10/11に標準搭載されている「BIZ UDPゴシック」を優先的に指定することで、視覚障害や失読症の方、小さな文字が読みづらい方にも圧倒的に優しいサイト設計が可能です。

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic", Meiryo, sans-serif;
}

ポイント: "BIZ UDPGothic" を「遊ゴシック」より前に記述します。これにより、Windows環境では視認性の高いUDフォントが優先され、游ゴシックの掠れ問題も同時に解決できます。

④ アプリ風UIや管理画面に最適！システムフォント指定

Webサービス、ダッシュボード、管理画面など「Webサイト」ではなく「アプリケーション」としてのUIを提供する場合は、OSのシステムフォントに100%委ねる指定がベストプラクティスとなります。

.app-container {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

ポイント: system-ui は、ユーザーがデバイス本体で設定しているフォント（明朝やゴシック、あるいは独自のシステムフォント）をそのままブラウザに反映させます。そのため、デバイスとの一体感や馴染みやすさが最優先されるUIに向いています。

明朝体を使いたい場合

落ち着いた印象や読み物らしさを出したい場合は、明朝体・セリフ系を指定します。

.article-body {
  font-family:
    "Times New Roman",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
}

ただし、Webサイト全体を明朝体にすると、小さい文字が読みにくくなる場合があります。本文の可読性を確認しながら使いましょう。

おしゃれに見えるフォントでも、スマホで読みづらいとユーザー体験が落ちます。デザイン性より先に読みやすさを確認しましょう。

Webフォントとローカルフォントの違い

font-familyで指定できるフォントには、ユーザーの端末に入っているローカルフォントと、Web上から読み込むWebフォントがあります。

種類	特徴	注意点
ローカルフォント	端末に入っているフォントを使う	環境によって見た目が変わる
Webフォント	サイト側でフォントを読み込む	読み込み速度に影響する場合がある

Google Fontsなどを使う場合

Webフォントを使う場合は、フォントファイルを読み込んだうえでfont-familyに指定します。

<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">

body {
  font-family: "Noto Sans JP", sans-serif;
}

Webフォントを大量に読み込むとページ表示が遅くなることがあります。太さや種類は必要最小限に絞りましょう。

font-familyが効かない原因と対策

font-familyを書いたのに反映されない場合は、次のポイントを確認しましょう。

原因1：フォント名の書き方が間違っている

スペースを含むフォント名を引用符で囲んでいない場合、意図通りに解釈されないことがあります。

body {
  font-family: Noto Sans JP, sans-serif;
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

原因2：そのフォントが端末に入っていない

ローカルフォントは、ユーザーの端末に入っていなければ表示できません。

たとえば、自分のPCでは表示されても、別のPCやスマホでは別フォントになることがあります。

特定フォントに依存しすぎず、複数の候補と汎用フォントをセットで指定するのが実務の基本です。

原因3：Windowsで「遊ゴシック」が細すぎて見づらい（かすれる）

フォント自体は正しく適用されているのに、「なぜかWindowsで見ると文字が細すぎて掠れて見える」という現象が実務では非常によく起こります。

これは、MacとWindowsで「遊ゴシック（Yu Gothic）」のデフォルトの太さ（Weight）の扱いが異なるために発生する現象です。

【対策】

これを解決するには、CSSでミディアム（500）の太さを明示的に指定するか、フォント名に "Yu Gothic Medium" を含めるのが実務のテクニックです。

/* 対策例①：font-weightで500（ミディアム）を指定する */
body {
  font-family: "Yu Gothic", sans-serif;
  font-weight: 500; /* Windowsでの掠れを防止 */
}

/* 対策例②：フォント名自体にMediumを指定する */
body {
  font-family: "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", sans-serif;
}

このように、実務のコーディングでは各OSでの「見え方の違い」まで考慮して一工夫加えることが大切です。

原因４：CSSの優先順位で上書きされている

WordPressテーマやプラグインのCSSで、あとから別のfont-familyが指定されていると、自分のCSSが上書きされることがあります。

body {
  font-family: "Noto Sans JP", sans-serif;
}

.post-content {
  font-family: "Yu Gothic", sans-serif;
}

この場合、.post-content内では後者の指定が優先されます。

WordPressでfont-familyが効かない場合は、ブラウザの検証機能で「どのCSSが勝っているか」を確認しましょう。

実務で迷わないfont-familyのおすすめルール

実務では、デザインごとにフォント指定を毎回ゼロから考えるより、まずは安全な型を決めておくと効率的です。

基本はbodyに指定する

サイト全体のフォントは、bodyに指定するのが一般的です。

body {
  font-family:
    "Helvetica Neue",
    Arial,
    "Hiragino Sans",
    "Yu Gothic",
    Meiryo,
    sans-serif;
  line-height: 1.8;
}

font-familyは継承されるため、bodyに指定すると多くの要素へ反映されます。

コードや管理番号にはmonospaceを使う

コード例や管理番号のように、文字幅を揃えたい箇所ではmonospaceを使います。

code,
pre {
  font-family: Consolas, Monaco, "Courier New", monospace;
}

数字や記号が揃いやすく、コードが読みやすくなります。

公式ドキュメントも確認する

font-familyの正確な仕様を確認したい場合は、MDN Web Docsの公式情報も参考になります。

• MDN Web Docs font-family
• MDN Web Docs @font-face
• MDN Web Docs Fundamental text and font styling

まとめ：font-familyは候補とフォールバックをセットで考えよう

この記事では、CSSのfont-familyについて解説しました。

font-familyは、使いたいフォントを優先順に並べ、最後に汎用フォントを指定するのが基本です。日本語サイトでは、英字フォントだけでなく、Hiragino Sans、Yu Gothic、Meiryoなど日本語環境の候補も入れておくと、表示のばらつきを抑えやすくなります。

また、Webフォントを使う場合は、見た目を統一しやすい一方で、読み込み速度への影響も考える必要があります。効かないときは、フォント名のスペル、引用符、端末にフォントがあるか、CSSの優先順位を順番に確認しましょう。