CSS

This CSS property lets you list several font choices so your text keeps almost the same look and stays easy to read on different devices and systems.

font-family

font-family とは？

font-familyプロパティは、文字の書体（フォント）の候補を、先に使ってほしい順番でまとめて指定するためのプロパティです。

フォント名はカンマ（ , ）で区切って複数の候補を並べることができます。先頭に「本命」のフォントを書き、その後ろに「似た雰囲気の予備フォント」と最後に serif や sans-serif などの総称フォントを書くことで、ユーザーの環境ごとに少し違っても、できるだけ近い見た目で文字を表示できます。

指定したフォントがユーザーの環境にインストールされていない場合には、ブラウザで設定されたデフォルトのフォントで表示されます。

値

フォント名で指定
｢ＭＳ ゴシック｣や｢ＭＳ 明朝｣のようにフォント名で指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション（ " ）またはシングルクォーテーション（ ' ）で囲むようにしてください。
キーワードで指定
フォントの種類を表すキーワードで指定します。
sans-serif
ゴシック系のフォント
serif
明朝系のフォント
cursive
筆記体・草書体のフォント
fantasy
装飾的なフォント
monospace
等幅フォント

よく使うフォント指定パターン

実際のサイトでは、毎回ゼロからフォント名を考えるよりも、「よく使う組み合わせ（フォントスタック）」を決めておくととても楽になります。ここでは、日本語サイトや英語サイトでよく使われるパターンをいくつか紹介します。

日本語サイトでよく使うゴシック体の例
日本語の本文をすっきりしたゴシック体で読みやすくしたいときの、定番の書き方です。

CSS

body {
    font-family: "游ゴシック体", "Yu Gothic", "ＭＳ Ｐゴシック", sans-serif;
}
新しめの環境では「游ゴシック体」「Yu Gothic」が使われ、古めの環境では「ＭＳ Ｐゴシック」、どれもなければ最後の sans-serif でゴシック系フォントが選ばれます。
日本語サイトで明朝体にしたい場合
文章メインのサイトや、落ち着いた印象にしたい場合によく使うパターンです。

CSS

body {
    font-family: "游明朝", "Yu Mincho", "ＭＳ Ｐ明朝", serif;
}
できるだけ「游明朝」「Yu Mincho」が使われ、それがない環境では「ＭＳ Ｐ明朝」、それもなければ最後の serif で明朝系フォントが選ばれます。
英語中心のサイトで使うシンプルな例
英語だけのサイトや、ラテン文字が中心のページでよく見るゴシック系の例です。

CSS

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}
macOS や iOS ではシステム標準フォント、Windows では「Segoe UI」、Android では「Roboto」など、環境ごとに読みやすい標準フォントが選ばれるようになっています。
最近よく使われるシステムフォント（system-ui）の例
もっとシンプルに、各端末の標準 UI フォントを使いたいときに便利なキーワードです。

CSS

body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
system-ui は比較的新しいキーワードで、「その OS が普段 UI に使っているフォント」を使ってくれます。対応していないブラウザ向けに、後ろにいくつかフォント名や sans-serif を並べておきます。

Sample

スタイルシートで「ＭＳ　ゴシック」を指定。

スタイルシートで「ＭＳ　明朝」を指定。

abcdefg ABCDEFG 0123456789

HTML

<p class="sample1">スタイルシートで「ＭＳ　ゴシック」を指定。</p>
<p class="sample2">スタイルシートで「ＭＳ　明朝」を指定。</p>
<p class="sample3">abcdefg ABCDEFG 0123456789</p>

CSS

.sample1 {
	font-family: "ＭＳ ゴシック", sans-serif;
}
.sample2 {
	font-family: "ＭＳ 明朝", serif;
}
.sample3 {
	font-family: Impact, Charcoal;
}

よくある質問（FAQ）

Q. フォント名は毎回ダブルクォーテーションで囲んだ方がいいですか？
A. 半角英数字だけでスペースもないフォント名なら省略しても動きますが、スペースや日本語を含む場合は「"ＭＳ ゴシック"」のようにダブルクォーテーションで囲むクセをつけておくと安心です。
Q. Windows と Mac で同じフォントにすることはできますか？
A. 完全に同じフォントにそろえるのは難しいです。代わりに「ゴシック系」「明朝系」などの雰囲気をそろえることを意識して、最後に sans-serif や serif を付けるのがおすすめです。
Q. Web フォント（Google Fonts など）はどうやって使いますか？
A. まず別途 @font-face や提供サイトのリンクでフォントファイルを読み込み、そのフォント名を font-family の先頭に書きます。このページでは基本の考え方を中心に扱い、Web フォントの設定は別ページで詳しく分けると整理しやすいです。
Q. 日本語サイトならどんなフォント名を書けばいいですか？
A. 環境差を考えると、特定の日本語フォントだけにこだわるより、例として "游ゴシック体", "Yu Gothic", "ＭＳ Ｐゴシック", sans-serif のように、よく使われるものをいくつか並べて最後を sans-serif で締める形がよく使われます。

よくあるエラー早見表

指定したフォントがまったく反映されない
フォント名のスペルミスや全角・半角の違い、クォーテーションの抜けがないか確認します。また、そのフォント自体がユーザーの端末にインストールされていない可能性もあります。
日本語フォント名をそのまま書いたら CSS が効かなくなった
「ＭＳ ゴシック」のようにスペースや日本語を含むフォント名は、必ず "ＭＳ ゴシック" のようにダブルクォーテーションで囲みます。
全角カンマを使っていてフォントの区切りになっていない
候補の区切りには、必ず半角カンマ（,）を使います。全角の「，」になっていないか確認してください。
予備フォントを書いていないために別環境で見た目が崩れる
1つのフォント名だけ書くのではなく、似た雰囲気のフォント名をいくつか並べ、最後に serif や sans-serif などの総称フォントを付けておくと崩れにくくなります。
英字と日本語でバランスが悪く見える
英字用のフォントと日本語フォントが混ざると、太さや大きさのバランスが崩れることがあります。デザイン上気になる場合は、見出しだけ別フォントにする、英字だけ別の要素に分けるなどの調整も検討します。