フォントを指定する

font-family

{ font-family フォント・ファミリー : フォント名,一般フォント名; }

font-familyプロパティは、フォントを指定します。指定したフォントが閲覧者の環境にない場合は、ブラウザーで設定された標準のフォント(システムフォント)が表示されます。

初期値 ブラウザーに依存
継承 あり
適用される要素 すべての要素
モジュール CSS Fonts Module Level 3

値の指定方法

フォント名

フォント名 フォントファミリーの名称を指定します。カンマ(,)で区切って複数のフォントを指定でき、閲覧者の環境に用意された最初のフォントで表示されます。フォント名にスペースが含まれる場合は、"MS 明朝"のように引用符(")で囲む必要があります。スペースが含まれない場合に引用符で囲っても問題ありません。

一般フォント名

フォント名の値で指定したフォントが閲覧者の環境にない場合、ブラウザーのシステムフォントから以下の書体に対応するフォントで表示されます。

serif 英字にひげ飾り(serif)があるフォント。日本語では明朝系のフォントに当たる。
sans­serif ひげ飾りがないフォント。日本語ではゴシック系のフォントに当たる。
cursive 筆記体のフォント。日本語では草書 行書体のフォントに当たる。
fantasy 装飾的、表現的なフォント。
monospace すべての文字が同じ幅(等幅)のフォント。

サンプルコード

以下の例では、body要素内の文字についてWindowsなら「メイリオ」(Meiryo)、Macなら「ヒラギノ角ゴ ProN W3」(Hiragino Kaku Gothic ProN)、該当するフォントがない場合はゴシック系のシステムフォントで表示するように指定しています。

body {
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Sans-Serif;
}