font-family

CSS の font-family プロパティは、選択した要素に対して、フォントファミリ名や総称ファミリ名の優先順位リストを指定することができます。

複数の値をカンマで区切って、代替フォントを示します。ブラウザーはリストの中で最初のインストール済み、または @font-face @-規則を使用してダウンロード可能なフォントを選択します。

一括指定プロパティの font を使用すると、 font-size やその他のフォント関連プロパティを一度に設定できるのでふつうは便利です。

指定されたフォントが利用可能であるという保証はないので、 font-family リストの中に、総称ファミリを少なくとも 1 つ、常に追加しておくべきです。総称ファミリを使うことで、必要ならば、ブラウザーで受け付け可能な代替フォントを選択させることができます。

font-family プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定します。フォント選択は、ユーザーのシステム上に存在する、リスト中の一番最初に指定されたフォントを選んで終わるとは限りません。むしろ、フォント選択は 1 文字ずつ行われます。なぜなら、利用可能なフォントが、その文字を表示するのに必要なグリフを欠いている場合には、そのフォントよりも順位の低い利用可能なフォントが試行されるからです (ただし、これは Internet Explorer 6 およびそれ以前では動作しません)。フォントが一部のスタイル種類大きさでのみ利用可能な場合、これらのプロパティがどのフォントファミリを選択するかに影響する可能性があります。

構文

/* フォントファミリ名および総称ファミリ名 */
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-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: unset;

font-family プロパティは1つ以上のフォントファミリを、カンマで区切って指定します。それぞれのフォントファミリは <family-name> または <generic-name> の値です。

以下の例は二つのフォントファミリを並べており、最初は <family-name> で二番目は <generic-name> です。

font-family: Gill Sans Extrabold, sans-serif;

<family-name>
フォントファミリの名称。例えば、 "Times" や "Helvetica" はフォントファミリです。空白を含むフォントファミリ名は、引用符で囲む必要があります。
<generic-name>

総称フォントファミリは代替メカニズムです。このメカニズムによって、指定されたフォントがどれも利用できなかった場合、スタイルシート製作者の意図を多少なりとも保つことができます。総称ファミリ名はキーワードであり、引用符で囲んではいけません。総称フォントファミリは、フォントファミリ名リストの最終選択肢である必要があります。以下のキーワードが定義されています。

serif
終わりが止めや払い、または実際の活字のセリフの形をした角を持つ字形です。
例: Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif
sans-serif
平たい角の端を持つ字形です。
例: "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif
monospace
すべての字が同じ幅を持つ字形です。
例: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace
cursive
筆記体フォントの字形には、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の筆記体の特性があります。字形は、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。
例: "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive
fantasy
fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。
例: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
system-ui
指定されたプラットフォームの既定のユーザーインターフェイスフォントからグリフを取ります。文字の伝統は世界で様々であるため、この総称は他の総称にきれいに一致しない文字フォントを提供します。
ui-serif
ユーザーインターフェイス既定のセリフ付きフォントです。
ui-sans-serif
ユーザーインターフェイス既定のセリフなしフォントです。
ui-monospace
ユーザーインターフェイス既定の等幅フォントです。
ui-rounded
ユーザーインターフェイス既定の丸い特性を持ったフォントです。
math
これは、数式を表現するための特別なスタイル上の概念のためのものです。上付き文字と下付き文字、複数行をまたぐ括弧、式の入れ子、明確な意味を持つ二重のグリフなどです。
emoji
絵文字を表示するために特別にデザインされたフォントです。
fangsong
セリフ風の Song と手書き風の Kai の形の間にある中国語の文字の特定のスタイルです。このスタイルは政府文書によく使用されます。

妥当なファミリ名

フォントファミリ名は、引用符で囲まれた文字列か、引用符で囲まれていない 1 つ以上の識別子でなければなりません。これは、引用符で囲まれていないフォントファミリ名において、各トークンの冒頭に区切り記号文字や数字がある場合、エスケープしなければならないということを意味します。

例えば、以下の宣言は妥当です:

font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

以下の宣言は無効です。

font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

形式文法

[ <family-name> | <generic-family> ]#

ここで
<family-name> = <string> | <custom-ident>+
<generic-family> = serif | sans-serif | cursive | fantasy | monospace

いくつかのよくあるフォントファミリ

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

.sansserif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: Lucida Console, Courier, monospace;
}

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

.emoji {
  font-family: emoji;
}

.math {
  font-family: math;
}

.fangsong {
  font-family: fangsong;
}

仕様書

仕様書 状態 備考
CSS Fonts Module Level 4
generic font families の定義
草案 新しい総称フォントファミリを追加。特に、 system-ui, ui-serif, ui-sans-serif, ui-monospace, ui-rounded, emoji, math, fangsong
CSS Fonts Module Level 3
font-family の定義
勧告 特に変更なし
CSS Level 2 (Revision 1)
font-family の定義
勧告 特に変更なし
CSS Level 1
font-family の定義
勧告 初回定義

初期値ユーザエージェントに依存
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類離散値

ブラウザーの互換性

BCD tables only load in the browser