font-family（フォント）の指定方法をざっくり解説

CSSでフォントを指定する時、色々なサイトを見ていると「'」シングルクォーテーションがあったりなかったり、はたまた、「'」シングルクォーテーションだったり「"」ダブルクォーテーションだったり…。

例えばこんな感じ↓
font-family: メイリオ, Verdana;
font-family: 'メイリオ', 'Verdana';
font-family: "メイリオ", "Verdana";

フォントの指定方法がサイトによってマチマチでなんだかなぁ…だったので、今一度調べなおしてみました。

font-family（フォント）の指定方法

記号（引用符）で囲む条件

• フォント名にスペースを含む・含まないを問わない
• フォント名が日本語フォント・欧文フォントの場合
  （'MS ゴシック'や'MS 明朝'、'Arial'など）

記号（引用符）で囲まない条件

• WindowsやMacに標準インストールされている総称ファミリ名（総称フォント名）を指定する場合
  • serifやsans-serifなど

フォント名の指定の仕方

• 日本語名（例：メイリオ）と英語名（例：Meiryo）の両方を指定する必要はなくなったのでどちらか片方だけ記述する
• 「'」シングルクオーテーション、「"」ダブルクオーテーションはどっちでもOK
• 複数のフォントを指定する場合はカンマ区切り
• 優先したいフォントを先頭にして順番に書いていく

指定例

body {
  font-family:'メイリオ','ＭＳ ゴシック','Hiragino Kaku Gothic ProN',sans-serif;
}

フォント指定で必ず抑えておくべきポイント

各OSごとにフォント名を指定する

Windows、macOS、iOS（iPhone、iPad）などのOSは、それぞれ標準インストールフォント（初めから入っているフォント）が異なります。そのため、font-familyには、各OS表示用に複数のフォント名を指定しておくことが推奨されています。

body {
  font-family:'MS Gothic'（Windows用）, 'ヒラギノ角ゴシック',……
}

最後に総称ファミリ名（総称フォント名）を指定する

指定したフォントが全て表示されなかった場合の対策として、最後に総称ファミリ名（総称フォント名）（ゴシック体や明朝体）を指定しておきます。
（もしfont-familyに何も指定しなかった場合は、OS・ブラウザごとのデフォルトフォントが適用されます。）

body {
  font-family:'MS Gothic'（Windows用）, 'ヒラギノ角ゴシック', sans-serif;
}

指定する総称ファミリ名（総称フォント名）の代表的なものは以下の6つになります。
（総称ファミリは「一般フォントファミリ」「ジェネリックフォントファミリ(generic font family)」とも呼ばれています。）

欧文フォントを指定する場合に気を付けたいこと

英語部分（半角英数字）に欧文フォント、日本語部分は日本語フォントを指定したい場合は、欧文フォント名を日本語フォント名よりも先に記述することで実現できます。

body {
  font-family:’Helvetica’, 'MS Gothic'（Windows用）, 'ヒラギノ角ゴシック', sans-serif;
}

おさらい

表示されるフォントは、ユーザー側の環境に依存してしまいますが、正しいfont-familyの指定をしてあげれば、制作側の意図したフォントを表示させることが出来るようになっています。

もし意図した通りのフォントになってくれない場合は、指定の仕方を再確認してみるとうまくいくかもしれません（^o^）