font-family

文字に使う書体を優先順に選ぶプロパティ。日本語と英数字を同じ見本で比べ、端末にフォントがない場合の備え方も学びます。

CSSの`font-family`とは？

system-ui・sans-serif・serif・monospaceをライブプレビューで切り替えながら、書体の優先順、フォールバック、引用符、継承を初学者向けに解説します。

遊んでみよう

日本語と英数字を同じ一般ファミリーで比較

TYPE SPECIMEN見える CSS

Aa Bb Cc 0123

読みやすい書体を順番に選びます。

system-ui：端末のUIに使われる一般書体を表示します

CSS

.element font-family: system-ui;

値のパターン

一般ファミリー font-family

font-familyの構成要素

01<family-name>

使いたい書体名を書く

固有のフォント名を指定します。空白を含む名前は、"Noto Sans JP"のように引用符で囲むと安全です。

02,

候補を優先順に区切る

カンマの左から順に、端末にあり対象の文字を表示できるフォントが選ばれます。

03<generic-family>

最後に一般ファミリーを置く

sans-serifやserifなどを末尾に置き、固有フォントがない環境でも似た種類の書体へフォールバックさせます。

早見表

仕様上の初期値はブラウザーに依存します。この教材はsystem-uiから始め、端末に必ずしも同じ固有フォントがないことを前提に一般ファミリーを比べます。

01system-ui端末のUIに使われる書体教材の初期値

02sans-serifひげ飾りのない一般書体ゴシック系

03serifひげ飾りのある一般書体明朝系

04monospaceすべての文字が同じ送り幅の一般書体コード向け

05"Noto Sans JP", sans-serif固有名の後に一般ファミリーを置くフォールバック

06inherit親要素の候補リストを受け継ぐグローバル

よくある使い方

サイト全体へ端末のUI書体を使う

bodyへ指定すると継承によって多くの子要素へ届き、OSになじむUI書体を基本にできます。

body { font-family: system-ui, sans-serif; }

読み物へセリフ書体の候補を並べる

利用できる固有フォントを左から試し、どちらもない環境ではserifの一般書体を使います。

article { font-family: Georgia, "Times New Roman", serif; }

コードを等幅書体で揃える

OSごとの等幅フォント候補を並べ、最後のmonospaceで文字の送り幅を揃えます。

code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }

ポイント

最後は、引用符で囲まない一般ファミリーで備える。

font-familyの初期値はブラウザーに依存し、すべての要素とテキストに適用でき、子要素へ継承されます。候補は左から順に調べられ、最初の書体に必要な文字がないと次の候補へ進みます。固有フォントは端末や読み込み状態で利用できないことがあるため、末尾へsans-serif・serif・monospaceなどの一般ファミリーを引用符なしで指定します。書体の切り替えは離散的で、途中の形へ滑らかには変化しません。