この記事はCSS入門の続きです。font-familyを理解するにはCSSの基本知識が必要になります。まだCSSを学んでいない方は、先に「CSS入門：書き方の基本とセレクタの使い方」をご覧ください。
1. font-familyとは？
CSSの font-family は、ウェブページに表示するフォント（文字の種類）を指定するプロパティです。フォントを変えるだけで、ページの雰囲気ががらりと変わります。
p {
font-family: Impact;
}これはImpactフォントの例文です。
このように セレクタ { font-family: フォント名; } という形でフォントを指定します。
2. font-familyの書き方ルール
2-1. 基本は複数のフォントをカンマで並べる
font-familyは、複数のフォントをカンマ（,）で区切って指定するのが基本です。
body {
font-family: Avenir, 'Hiragino Sans', YuGothic, sans-serif;
}💡 カンマの後ろのスペースは入れても入れなくてもどちらでもOKです。
2-2. なぜ複数指定するの？
OSによってインストールされているフォントが異なるからです。たとえばMacにしか入っていないフォントをWindowsパソコンのユーザーは表示できません。そのため、Windows・Mac・iPhoneの各環境をカバーできるよう複数のフォントを並べて指定します。
| 環境 | 搭載フォントの例 |
|---|---|
| Windows | メイリオ・游ゴシック・ＭＳ ゴシック |
| Mac / iPhone | ヒラギノ角ゴシック・Avenir・Helvetica Neue |
| Android | Roboto・Droid Sans |
2-3. 前に書いたフォントが優先される
複数指定したフォントは左（前）から順番に適用を試みます。先頭のフォントがデバイスにインストールされていればそれを使い、なければ次のフォント……という順に進みます。
,
Corbel
,
sans-serif
② なければ
③ 最終手段
優先的に使いたいフォントを前に書くようにしましょう。
2-4. 英語フォントは前、日本語フォントは後ろに書く
英語しか表示できない「英語フォント」と、英語＋日本語を表示できる「日本語フォント」があります。英語フォントを先に書くことで、アルファベットには英語フォント、日本語文字には日本語フォントが適用されます。
body {
font-family:
/* ① 英語フォント */
Avenir, 'Helvetica Neue',
/* ② 日本語フォント */
'Hiragino Sans', YuGothic,
/* ③ 総称フォント */
sans-serif;
}ABC abc 123 → 英語フォントが担当
あいう 漢字 → 日本語フォントが担当
2-5. スペースが入るフォント名は「’」でくくる
「Avenir Next」や「MS ゴシック」のようにフォント名の間に半角スペースが入るものは、クオテーション（’ または “）でくくる必要があります。くくらないと正しく認識されません。
font-family: Hiragino Sans, MS ゴシック;font-family: 'Hiragino Sans', 'MS ゴシック';💡 スペースが入っていないフォント名をクオテーションでくくっても問題ありません。迷ったら全部くくってしまっても大丈夫です。
2-6. 最後に総称フォントファミリーを書く
font-familyの一番最後には総称フォントファミリー名を書きます。指定したフォントがすべて使えなかった場合に「せめてこの系統のフォントで表示して」とブラウザに伝える”最後の砦”です。
| 総称フォント名 | 表示される系統 | 使う場面 |
|---|---|---|
sans-serif |
ゴシック体（メイリオ・游ゴシックなど） | ⭐ 最もよく使われる |
serif |
明朝体（游明朝・Times New Romanなど） | 文章が多いサイトに |
monospace |
等幅フォント（Courier Newなど） | コード表示に |
cursive |
筆記体・手書き風 | 装飾用に |
fantasy |
装飾フォント | 特殊な用途に |
✅ 迷ったら sans-serif を使いましょう。ほぼすべてのウェブサイトで採用されています。
3. ウェブページ全体にフォントを指定する方法
font-familyはページ全体にまとめて適用するのが一般的です。body をセレクタにして書けば、ページ内のすべての文字に一括で適用されます。
body {
font-family:
'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial',
'Hiragino Sans', 'ヒラギノ角ゴシック',
YuGothic, 'Yu Gothic',
'メイリオ', Meiryo,
'ＭＳ Ｐゴシック', 'MS PGothic',
sans-serif;
}-
1
HTMLファイルの
<head>内に<style>タグを用意する前の講座で学んだ方法でstyleタグを追加します。
-
2
bodyセレクタに font-family を書く記述例
<style> body { font-family: 'Hiragino Sans', YuGothic, 'メイリオ', sans-serif; } </style> -
3
保存してブラウザで確認する
ページ全体のフォントが変わっていれば成功です。
保存 Windows：Ctrl + S
保存 Mac：⌘ + S
4. おすすめのfont-familyの書き方
Windows・Mac・iPhoneの3環境できれいに表示され、読みやすさとおしゃれさを兼ね備えたfont-familyの例を紹介します。こだわりがない方はコピーして使ってみてください。
body {
font-family:
'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial',
'Hiragino Sans', 'ヒラギノ角ゴシック',
YuGothic, 'Yu Gothic',
'メイリオ', Meiryo,
'ＭＳ Ｐゴシック', 'MS PGothic',
sans-serif;
}| フォント名 | 対応環境 | 種類 |
|---|---|---|
Avenir |
Mac / iPhone | 英語 |
'Helvetica Neue' |
Mac / iPhone | 英語 |
'Hiragino Sans' |
Mac / iPhone | 日本語 |
YuGothic |
Mac / Windows | 日本語 |
'メイリオ' |
Windows | 日本語 |
sans-serif |
すべて | 総称（最終手段） |
Androidのフォントについて
Androidのスマホには共通して使えるフォントが少なく、基本的に Roboto か 'Droid Sans' の2種類です。統一したい場合は以下のように追加しておきましょう。
body {
font-family:
Roboto, 'Droid Sans', /* Android */
'Avenir', 'Helvetica Neue', /* Mac/iPhone 英語 */
'Hiragino Sans', YuGothic, /* Mac/iPhone/Win 日本語 */
'メイリオ', sans-serif; /* Win / 総称 */
}5. font-familyを書くときのコツ
ここまでのポイントをまとめます。
| チェック項目 | 理由 |
|---|---|
| ✅ 優先したいフォントを前に書く | 前に書かれたフォントから順に適用される |
| ✅ 英語フォントを先、日本語フォントを後に書く | アルファベットを英語フォントで美しく表示するため |
| ✅ Win・Mac・iPhoneの3環境をカバーする | 環境が違ってもきれいに表示するため |
| ✅ スペース入りのフォント名はクオテーションでくくる | くくらないとブラウザが認識できないため |
✅ 最後に sans-serif などの総称フォントを書く |
すべてのフォントが使えない場合の保険になるため |
body {
/* スペースなしフォント名のみ */
font-family: Meiryo;
/* 総称フォントがない */
}body {
font-family:
'Avenir', 'Hiragino Sans',
YuGothic, 'メイリオ',
sans-serif; /* 総称あり */
}📝 まとめ
font-familyはCSSでフォントの種類を指定するプロパティ- 基本文法：セレクタ { font-family: フォント名1, フォント名2, …; }
- OSによってフォントが異なるため、複数のフォントをカンマで並べるのが基本
- 前に書かれたフォントが優先的に適用される
- 英語フォントを前・日本語フォントを後ろに並べる
- フォント名に半角スペースが入る場合は ‘ ‘ または ” ” でくくる
- 最後には 総称フォントファミリー（
sans-serifなど）を書く - サイト全体に適用するときは bodyをセレクタにして指定する
次のステップ
font-familyをマスターしたら、次は 文字装飾の基本（font-weight・font-style・text-decoration など） を学びましょう。
