【CSS】font-family - 文字の書体

CSSのfont-familyプロパティについてご紹介します。

font-family

font-familyは文字の書体を定義します。

基本構文

font-family: 値;

複数書体の指定は、カンマ（,）で値を区切ります。

font-family: 値, 値, 値;

値が複数ある場合、左から優先して書体の適用可否を判定します。
可能な場合は適用し、不可の場合は次の書体を検証します。

値

書体はブラウザにデフォルトで入っているものや、外部から読み込んで設定できます。
次の書体は一般的に使うことができます。

サンプル

書体の定義

次のサンプルは文字の書体をserifに設定します。

<style>
p {
    font-family: serif;
}
</style>

<p>text text text text text</p>

複数の書体

次のサンプルは文字の書体を２つ指定しています。
"TEST"という書体はないため、serifが適用されます。

<style>
p {
    font-family: "TEST", serif;
}
</style>

<p>text text text text text</p>