スタイルシート属性 font-family はフォント（文字の書体）の種類を指定します。font スタイルシート属性でも同様の定義が行えます。
font-family: font [,font ...]font-family属性にはつぎの値を指定する。
総称ファミリはブラウザ環境に依存しない抽象的なフォント名である。総称ファミリの一覧を次の表に示す。
| 総称ファミリ名 | 説明 |
|---|---|
| serif | セリフ（ひげ飾りつき文字）。日本語の明朝体に相当。 |
| sans-serif | サンセリフ（ひげ飾りなしの文字）。日本語のゴシック体に相当。 |
| monospace | 等幅文字 |
| fantasy | 装飾文字 |
| cursive | 筆記体。日本語の草書体に相当。 |
総称ファミリは何らかのフォントに割り当てられているが、具体的にどのフォントに割り当てられているかはブラウザ環境によって異なる。
具体的なフォント名を指定する場合、ブラウザ環境によっては指定されたフォントが使用できない可能性があるため、属性値リストの中に総称ファミリ名を含めておくことが望ましい。
属性値リストに指定されたフォントがすべて使用できない場合、デフォルトのフォントで表示される。
フォント名に空白文字（スペース）が含まれる場合、フォント名を2重引用符(")または単引用符(')で括る。
複数の属性値を指定した場合、左側の値が優先される。
<p style="font-family: monospace, serif;">The quick brown fox jumps over the lazy dog.</p>The quick brown fox jumps over the lazy dog.
<p style="font-family: serif, monospace;">The quick brown fox jumps over the lazy dog.</p>The quick brown fox jumps over the lazy dog.
ブラウザ環境で対応していないフォント名が指定された場合、優先順位に従って対応するフォントを決定する。
<p style="font-family: not-exist-font, monospace;">The quick brown fox jumps over the lazy dog.</p>The quick brown fox jumps over the lazy dog.
総称ファミリとは、どんなOSでも指定できるフォントである。
| 総称ファミリ | サンプル |
|---|---|
| serif | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| sans-serif | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| monospace | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| fantasy | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| cursive | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
Microsoft Windowsでは次のフォントを指定できる。
| フォント | サンプル |
|---|---|
| Yu Gothic UI | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| 游ゴシック | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| 游明朝 | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| Meiryo UI | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| メイリオ | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| ＭＳ 明朝 | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| ＭＳ Ｐ明朝 | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| ＭＳ ゴシック | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| ＭＳ Ｐゴシック | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| Arial | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| Courier New | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| Georgia | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| Impact | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| Times New Roman | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| Verdana | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
Microsoft WindowsではＭＳゴシックフォントで表示し、その他のOSではsans-serifフォントで表示する場合は、次のように指定する。
<p style="font-family: 'ＭＳ ゴシック', sans-serif;">example</p>macOSでは次のフォントを指定できる。
| フォント | サンプル |
|---|---|
| ヒラギノ角ゴシック | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| ヒラギノ丸ゴ | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
| ヒラギノ明朝 | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
macOSではヒラギノ角ゴシックフォントで表示し、その他のOSではsans-serifフォントで表示する場合は、次のように指定する。
<p style="font-family: ヒラギノ角ゴシック, sans-serif;">example</p>Androidでは次のフォントを指定できる。
| フォント | サンプル |
|---|---|
| Roboto | The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。 |
AndroidではRobotoフォントで表示し、その他のOSではsans-serifフォントで表示する場合は、次のように指定する。
<p style="font-family: Roboto, sans-serif;">example</p>World Wide Web Consortium (2018) CSS Fonts Module Level 3