[CSS] font-familyの指定方法

font-family の基本的な指定方法についてまとめました。

カンマで区切って指定する

1つ以上のフォントファミリーをカンマ（,）で区切って指定します。

例：

 
フォントは左から順に優先適用されます。

OSごとにフォントを複数指定する

OSごと（Windows、Mac 等）に標準で入っているフォントは異なります。
その為、各OS用に複数のフォント名を指定することが推奨されています。

例：

上記の例ではWindows向けに”游ゴシック”、Mac向けに”ヒラギノ角ゴ ProN” を指定しています。

総称フォント名を最後に指定する

指定したフォントが全て利用できなかった場合の対策として、sans-serif、serifなどの「総称フォント名」を最後に指定します。

ゴシック体の例：

明朝体の例　　：

総称フォントを指定すると、指定したフォントが全て利用できなかった場合に、OSごとにデフォルトで設定されているフォントが適用されます。

引用符（「”」または「’」で囲む

フォントファミリー名は、引用符「”（ダブルクォーテーション）」、または「’（シングルクォーテーション）」）で囲みます。
一方で、総称フォント名は引用符では囲みません。

欧文フォントは日本語フォントより前に書く

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

例：

日本語フォント名に対し、和名・英字名の両方を指定する必要はない。英字名のみでよい

↓