font-family:フォントの種類を指定する

初期値 ユーザーエージェントの既定値
適用対象 全ての要素、::first-letterおよび::first-line
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

font-familyプロパティの説明

font-familyは、ブラウザが表示するフォントの種類や総称ファミリー名の優先順位を指定します。複数の値をカンマ区切りで指定することで、先頭から順に利用可能であれば採用すべきフォントを示すことができます。

ここで指定されたフォントは、端末にインストール済み、あるいはダウンロード可能であれば、画面に表示される文字列に適用されます。利用可能なフォントがなかった場合のために、総称ファミリー名を必ず併記しておきましょう。

フォントの最適化は一文字ずつ行われます。要素のまとまりや段落単位で共通のフォントが使われるわけではありません。英文と日本語が混在している文章であれば、それぞれの文字に利用できるフォントを個別に適用します。数字や記号なども指定されたリストの中から利用可能なものを探します。他のプロパティで指定された文字の太さや装飾によって、フォントの選択に影響が出る場合もあります。

CSSによるフォントファミリーの指定は絶対的なものではありません。あくまで製作者側が意図している理想的な書体を提案するものです。ユーザー側でブラウザの既定値を優先していたり、ユーザーエージェントの設定が優先されるような環境では、ここで指定した値は保証されません。

フォント関連のプロパティを一括で指定する場合は、ショートハンド・プロパティのfontを使用して下さい。

font-familyに指定できる値

<family-name>
フォントファミリーの名称です。そのフォントを呼び出すための名称を指定します。名称にスペースが含まれる場合は原則として引用符で囲むことを推奨します。
<generic-name>
総称フォントの名称です。指定されたフォントがどれも利用できなかった場合に、ブラウザがOSに標準でインストールされているフォントの中から選択するためのヒントを与えます。これを指定しておくことで、製作者側の意図を最低限反映させることができます。基本的には値の末尾に記載します。

総称フォントファミリーの一覧

CSSのfont-familyで指定できる総称フォントファミリーの一覧です。要素にフォントを指定する祭は、値の末尾にこの中のいずれかを記載しておきましょう。

名称 説明
serif セリフ体を表す総称ファミリー名です。文字の先端に飾りがついたフォントを表示します。セリフを持つ書体のことをローマン体と呼びます。
sersans-serifif サンセリフ体を表す総称ファミリー名です。文字の先端に飾りがつかないフォントを表示します。日本ではゴシック体とも呼ばれますが、欧文ではブラックレターのことを指しすため正確ではありません。
monospace 全ての文字が同じ幅を持つ等幅書体を表す総称ファミリー名です。モノスペースとはグリフ幅が固定されているという意味です。
cursive 筆記体を表す総称ファミリー名です。筆記体は毛筆やペンで書かれた手書き風の文字を表します。多くの場合、斜体になっていたり文字同士がつながって見えます。
fantasy 個性的な装飾を持つ書体の総称ファミリー名です。遊び心に溢れた書体や独特の雰囲気を持つ文字を表示します。
system-ui システムで既定となっているユーザーインターフェイスを表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせて取ります。
ui-serif ユーザーインターフェイスのセリフ体を表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせてセリフ体で表示します。
ui-sans-serif ユーザーインターフェイスのサンセリフ体を表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせてサンセリフ体で表示します。
ui-monospace ユーザーインターフェイスの等幅を表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせて等幅フォントで表示します。
ui-rounded ユーザーインターフェイスの丸字体を表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせて丸字体で表示します。
math 数式などで使われる独自の書体を持つ総称ファミリー名です。上付き文字や下付き文字、複数の行をまたぐ括弧、入れ子の数式、明確な意味を持った二重のグリフなどがあります。
emoji 絵文字を表示するために特別な文字セットを持つ総称ファミリー名です。
fangsong 中国語の文字を表す特別な総称ファミリー名です。セリフ体風の Song と手書き風の Kai を合わせたような表現を持ちます。

font-familyの使い方とサンプル

font-familyプロパティの構文は以下の通りです。

CSS
/* サンセリフ体の指定 */
font-family: "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
font-family: "ヒラギノ角ゴ ProN", "MS Pゴシック", sans-serif;

/* セリフ体の指定 */
font-family: "Times New Roman", serif;
font-family: "HiraMinProN-W3", "MS PMincho", serif;
font-family: "ヒラギノ明朝 ProN W3", "MS P明朝", serif;

/* 総称ファミリー名 */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;

/* グローバル値 */
font-family: inherit;
font-family: initial;
font-family: revert;
font-family: unset;

font-familyの実例

それでは実際にfont-familyプロパティの書き方を見ていきましょう。以下の例は、個別の総称ファミリー名を与えた要素の比較を表しています。

表示確認
CSS
.samp_box {
	overflow: auto;
	width: 100%;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box p {
	margin: 1rem 0 0;
	padding: .3rem;
	background: #fff;
}
#ff_serif {
	font-family: serif;
}
#ff_sans {
	font-family: sans-serif;
}
#ff_mono {
	font-family: monospace;
}
#ff_cur {
	font-family: cursive;
}
#ff_fan {
	font-family: fantasy;
}
HTML
<section class="samp_box">
	<p id="ff_serif">font-family: serif; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
	<p id="ff_sans">font-family: sans-serif; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
	<p id="ff_mono">font-family: monospace; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
	<p id="ff_cur">font-family: cursive; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
	<p id="ff_fan">font-family: fantasy; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
</section>

具体的なフォントファミリーの指定

フォントファミリーの指定にこだわるのであれば、まずは大手企業の公式サイトや利用者が多いウェブサービスのCSSを確認しましょう。不特定多数のユーザーが利用するサイトでは、多様な環境で表示されることを想定した内容となっています。まずは、共通している記述内容を押さえて自身が手掛けるサイトの特性に合ったトレンドを取り入れていくと上手くいきます。

CSS
/* ================== */
/* 以下の内容は参考例です */
/* ================== */
body { /* シンプル */
	font-family:
		Hiragino Kaku Gothic Pro,
		MS PGothic,
		sans-serif;
}
body { /* 日本語指定 */
	font-family:
		"ヒラギノ角ゴ Pro",
		"MS Pゴシック",
		sans-serif;
}
body { /* 大手ポータルサイト */
	font-family:
		ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro,
		メイリオ, Meiryo,
		Osaka,
		MS Pゴシック, MS PGothic,
		sans-serif;
}
body { /* グローバル企業 */
	font-family:
		"SF Pro JP", "SF Pro Text", "SF Pro Icons",
		"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
		メイリオ, Meiryo,
		"MS Pゴシック",
		"Helvetica Neue", Helvetica,
		Arial,
		sans-serif;
}
body { /* 大手動画サイト */
	font-family:
		Avenir,
		Lato,
		-apple-system,
		BlinkMacSystemFont,
		Helvetica Neue,
		Hiragino Kaku Gothic ProN,
		Meiryo,メイリオ,
		sans-serif;
}

font-familyに関連するCSSプロパティ

フォント・文字色
color 文字の色を指定する
font フォントに関する様々な機能を一括で指定する
font-family 文字フォントの種類を指定する
font-feature-settings OpenTypeフォントの拡張書体の特性を制御する
font-kerning フォントの文字詰め(カーニング)を制御する
font-language-override 文字を表示する祭に使用する言語情報を一時的に変更する
font-size 文字フォントの大きさを指定する
font-size-adjust 現在のフォントサイズを基準に小文字の大きさを相対的に調整する
font-stretch 表示させるフォントの幅広や幅狭のフェイスを指定する
font-style フォントを筆記体や斜体で表示するかどうかを指定する
font-synthesis 太字や斜体に対応していないフォントの加工を制御する
font-variant フォントの表示形式やブラウザの合成規則を一括で指定する
font-variant-alternates 文字フォントの代替字体(グリフ)の選定を制御する
font-variant-caps 文字列に適用されるキャピタライゼーションルールを制御する
font-variant-east-asian 東アジアの言語で使われる字体を制御する
font-variant-ligatures 隣り合った文字フォントの合字(リガチャ)を制御する
font-variant-numeric 数値に関する文字表記を制御する
font-variant-position 上付き文字や下付き文字として配置されるべき字体の使用を制御する
font-weight 文字フォントの太さを指定する