CSS font-family プロパティ完全ガイド｜フォント指定・Web フォント・フォールバック・日本語対応

▶

この記事の要点

font-family は要素のフォントファミリーを指定する CSS プロパティ。複数のフォント名をカンマ区切りで並べる
左から順にブラウザが利用可能なフォントを探す。最後に必ず汎用ファミリー（sans-serif / serif / monospace）を書く
フォント名にスペースや日本語を含む場合はシングルクォートで囲む（例: "Hiragino Sans"）
system-ui を先頭に指定すると、OS 標準フォント（Mac: San Francisco / Windows: Segoe UI / Android: Roboto）に自動切替
Web フォントは @font-face や Google Fonts の <link> で読み込んでから font-family で指定

font-family とは

font-family は CSS でテキストに適用するフォントを指定するプロパティです。指定したフォントが見つからない場合のために、複数のフォントをカンマ区切りで並べる「フォントスタック」として記述するのが一般的です。

基本構文

selector {
  font-family: フォント名1, フォント名2, ..., 汎用ファミリー;
}

典型的な書き方

1. 英語サイトのサンセリフ系

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

2. 日本語サイト（モダン推奨）

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "ヒラギノ角ゴ ProN W3",
    Meiryo,
    "メイリオ",
    sans-serif;
}

3. OS 標準フォントを使う（高速・無難）

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

4. 等幅フォント（コード表示）

pre, code {
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

汎用ファミリー (generic family)

キーワード	意味	代表
serif	明朝・セリフ体	Times / 游明朝
sans-serif	ゴシック・サンセリフ体	Helvetica / 游ゴシック
monospace	等幅	Menlo / Consolas
cursive	筆記体	Brush Script
fantasy	装飾系	Impact 等
system-ui	OS 標準 UI フォント	San Francisco / Segoe UI

フォントスタックの末尾には必ず汎用ファミリーを書くと、フォント未指定状態を避けられます。

引用符のルール

フォント名	引用符	例
1 単語（英字）	不要	`Arial`
スペースを含む	必要	`"Helvetica Neue"`
日本語	必要	`"ヒラギノ角ゴ ProN W3"`
汎用ファミリー	不要	`sans-serif`

汎用ファミリーを引用符で囲むとただのフォント名扱いになり、フォールバックが効かなくなるので注意。

Web フォントの利用

Google Fonts

<!-- HTML head -->
<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;
}

@font-face で自前ホスティング

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2"),
       url("/fonts/myfont.woff")  format("woff");
  font-display: swap;
}

body {
  font-family: "MyFont", sans-serif;
}

日本語サイトのおすすめスタック

2026 年現在の主流は、OS 標準フォント＋汎用フォールバックです。Web フォントを使わない場合の例:

:root {
  --font-sans:
    "Helvetica Neue",
    Arial,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "BIZ UDPGothic",
    Meiryo,
    sans-serif;
}

body {
  font-family: var(--font-sans);
}

パフォーマンスのポイント

Web フォントは font-display: swap でテキストの表示を遅らせない
必要なサブセットのみ読み込む（日本語フルセットは数 MB になる）
preload で初期表示前にフォントを取得（<link rel="preload" as="font" crossorigin>）
OS 標準フォント (system-ui) ならダウンロード不要で最速

OS 別の標準日本語フォント

OS	標準ゴシック	標準明朝
macOS	Hiragino Sans / ヒラギノ角ゴ ProN	Hiragino Mincho ProN
Windows 10/11	Yu Gothic UI / 游ゴシック / Meiryo	Yu Mincho / 游明朝
iOS / iPadOS	Hiragino Sans	Hiragino Mincho ProN
Android	Noto Sans CJK JP / Roboto	Noto Serif CJK JP
ChromeOS	Noto Sans CJK JP	Noto Serif CJK JP

font-family のフォールバック挙動

フォントスタックは1 文字ずつ評価されます。たとえば英数字は Arial、日本語は Hiragino Sans がヒットといった具合に、文字種ごとに異なるフォントが適用されることがあります。これを意図的に使うと、欧文と和文で別フォントを組み合わせて綺麗な見た目を作れます。

body {
  /* 欧文は Helvetica Neue / Arial、
     見つからない文字（=日本語）は Hiragino で表示 */
  font-family:
    "Helvetica Neue",
    Arial,
    "Hiragino Sans",
    sans-serif;
}

よくあるトラブル

指定したフォントが当たらない — タイポ（Sans Serif ではなく sans-serif）／環境にフォント未インストール／優先度の高いセレクタで上書きされている、を疑う
Windows でだけ汚い — 游ゴシック (Yu Gothic) は細字の表示が暗くなりやすい。font-weight: 500 を当てると改善することがある
Web フォントの読み込みが遅い — font-display: swap 必須。fallback や optional も選択肢
FOIT/FOUT — フォント読み込み中に文字が消える/差し替わる現象。swap で FOUT 寄りに倒すのが現代の主流

ページ一覧

その他