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

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

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

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

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

構文

/* フォントファミリ名および総称ファミリ名 */
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: 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
指定されたプラットフォームの既定のユーザーインターフェイスフォントからグリフを取ります。文字の伝統は世界で様々であるため、この総称は他の総称にきれいに一致しない文字フォントを提供します。

妥当なファミリ名

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

仕様書

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

初期値ユーザエージェントに依存
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 6Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
system-ui
実験的
Chrome 完全対応 56Edge 未対応 なしFirefox 未対応 なし
未対応 なし
完全対応 43
補足 代替名
補足 Supported on macOS only.
代替名 非標準の名前 -apple-system を使用しています。
IE 未対応 なしOpera 完全対応 43Safari 完全対応 9
補足 代替名
完全対応 9
補足 代替名
補足 Supported since macOS 10.11.
代替名 非標準の名前 -apple-system を使用しています。
WebView Android 完全対応 56Chrome Android 完全対応 56Edge Mobile 未対応 なしFirefox Android ? Opera Android 完全対応 43Safari iOS 完全対応 あり
補足 代替名
完全対応 あり
補足 代替名
補足 Supported since iOS 9.
代替名 非標準の名前 -apple-system を使用しています。
Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。

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

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