概要

CSS の font-family プロパティを使うと、選択した要素に対して、フォントファミリー名と総称ファミリー名の両方、もしくはどちらか一方の優先順位リストを指定することができます。他のほとんどの CSS プロパティと異なり、各値が選択肢であることを示すには、それぞれをコンマで区切ります。ブラウザが選択するのは、コンピュータにインストール済み、もしくは @font-face @ 規則によって与えられる情報を使ってダウンロード可能な、リストの中で最上位のフォントです。

Web 製作者は、font-family リストの中に、総称ファミリーを少なくとも 1 つ、常に追加しておくべきです。指定したフォントが常にコンピュータにインストールされているとは限りませんし、@font-face @ 規則を使ってダウンロードできるとも限らないからです。総称ファミリーを使うことで、必要ならば、ブラウザに受け付け可能な代替フォントを選択させることができます。

font-size やその他のフォント関連プロパティを一度に設定するには、ショートハンドプロパティ font を使うと便利です。

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

フォントが一部の stylevariantsize でのみ利用可能な場合、これらのプロパティがどのフォントファミリーを選択するかに影響する可能性があります。

初期値ユーザエージェントに依存する
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承継承する
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* フォントファミリー名および総称ファミリー名 */
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: inherit;
font-family: inherit;
font-family: unset;

<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

妥当なファミリー名

フォントファミリー名は、引用符で囲まれた文字列か、引用符で囲まれていない 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> ]#

where
<family-name> = <string> | <IDENT>+
<generic-family> = serif | sans-serif | cursive | fantasy | monospace

例 1

body {
  font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
}

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

例 2

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

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

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

.examplecursive {
    font-family: cursive;
}

.examplefantasy {
    font-family: fantasy;
}
<div class="exampleserif">
This is an example of a serif font.
</div>

<div class="examplesansserif">
This is an example of a sans-serif font.
</div>

<div class="examplemonospace">
This is an example of a monospace font.
</div>

<div class="examplecursive">
This is an example of a cursive font.
</div>

<div class="examplefantasy">
This is an example of a fantasy font.
</div>

Live Sample

仕様

仕様書 策定状況 コメント
CSS Fonts Module Level 3
font-family の定義
勧告候補 特に変更なし
CSS Level 2 (Revision 1)
font-family の定義
勧告 特に変更なし
CSS Level 1
font-familiy の定義
勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本的なサポート 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本的なサポート 1.0 1.0 (1) 6.0 6.0 1.0

ドキュメントのタグと貢献者

 このページの貢献者: yyss, fscholz, Sebastianz, ethertank, Amigomr
 最終更新者: yyss,