タイトル: font-familyプロパティ
SEOタイトル: CSS font-family プロパティ完全ガイド｜フォント指定・Web フォント・フォールバック・日本語対応
| この記事の要点 |
|
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 寄りに倒すのが現代の主流