CSS: font-family フォントを指定する

WebページのフォントをCSSで指定するには、 font-family プロパティを使用します。

通常は複数の候補をカンマ区切りで指定し、その中からユーザーの環境で使用できるフォントで 表示されます。優先順位は先に記述したフォントが優先されます。

値は「フォントファミリー名」、又は「総称フォントファミリー名」を指定します。

フォントファミリー名

フォントファミリー名とは、フォントの具体的な名前(例: "MS ゴシック"、"メイリオ" 等)です。 フォントの名前は全角、半角、スペース等を正しく記述する必要があります。 "MS ゴシック"等の間にスペースが入る場合は、ダブルクォーテーション「"」、 又はシングルクォーテーション「'」で囲みます。

総称フォントファミリー名

フォントの種類の総称を総称フォントファミリー名といいます。 ユーザーの環境によってはフォントファミリー名で指定したフォントが利用できない場合があります。 そのばあいの最終選択肢として指定します。 総称フォントファミリー名は引用符(" 又は ')で囲みません。

総称フォントファミリー名として使用できる値は次の通りです。

総称フォントファミリー名 説明
serif 明朝系フォント
sans-serif ゴシック系フォント
cursive 筆記体・草書体系フォント
fantasy 装飾フォント
monospace 等幅フォント

font-family 使用例


body {
    font-family: "MS ゴシック",serif;
}

p {
    font-family: "メイリオ", arial, sans-serif;
}

font-family サンプル

複数のフォントを指定してみました。表示の違いは下の通りです。 前半がフォントファミリー名、後半が総称フォントファミリー名です。

このフォントは「メイリオ」です。

このフォントは「MS ゴシック」です。

このフォントは「MS 明朝」です。

このフォントは「arial」です。


このフォントは「serif」です。

このフォントは「sans-serif」です。

このフォントは「cursive」です。

このフォントは「fatasy」です。

このフォントは「monospace」です。

HTML・CSS入門