【font-family】フォントの種類を指定

font-familyプロパティでは、使用するフォントの種類を指定することができます。

フォントの種類はカンマ「,」で区切ることで、複数のフォントファミリー名、またはキーワードを指定することができます。 その場合は並べた順に指定したものが使用されます。

例えば、ユーザーの環境に第一候補のフォント(1番左に記述したもの)がなければ、第二候補のフォント、それもなければ第三候補のフォントが表示、というように並べた順にユーザーの環境で利用可能なものから使用されていきます。 指定してフォントがユーザーの環境で利用できない場合(インストールされていない場合)は、ブラウザ側で指定したフォントに近いフォント(デフォルト)が表示されます。

またユーザーの環境によっては、指定したフォントが全て利用できない場合もありますので、指定したフォントが表示できない時のために総称ファミリーを指定しておくようにしましょう。

なおNetscape4.7以前でフォントを指定した場合、文字コードセットの指定が日本語になっていると正しく動作しない場合があります。 Internet Explorerのバージョン4または5の場合は、欧米フォントを指定すると、正しく日本語が表示できない事もありますので注意して下さい。

書式

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

★:フォントファミリー名、総称ファミリー名(複数並べる場合はカンマ「,」で区切る)

フォントファミリー名
フォントを「MS Pゴシック」「メイリオ」のように名前で指定します。フォント名は全角や半角、スペース(空白)なども含め正確に記述して下さい。またフォント名にスペースが含まれている場合は、フォント名全体をダブルクォーテーション「"」、またはシングルクォーテーション「'」で囲む必要があります。ただし、スペースが含まれていないフォント名をこれらの引用符で囲っても問題ありません。
総称ファミリー
フォントの種類を示すキーワードで指定します。これらは指定したフォントファミリー名が全て利用できない時の、最終的な選択肢とするために、font-familyプロパティの最後に指定します。また総称ファミリーのキーワードは引用符で囲むと指定が無効となりますので、囲まないようにして下さい。
serif……日本語の明朝系のフォント
sans-serif……日本語のゴシック系のフォント
cursive……日本語の筆記体・草書体系のフォント
fantasy……装飾的なフォント
monospace……等幅のフォント

※指定できるフォントの種類についてはフォント一覧をご覧ください。

使用した時の例

.sample1 {font-family: "MS 明朝","Times New Roman",serif;}
.sample2 {font-family: "MS ゴシック",sans-serif;}
.sample3 {font-family:cursive;}
<p class="sample1">この部分は「MS 明朝」</p>
<p class="sample2">この部分は「MS ゴシック」</p>
<p class="sample3">この部分は「cursive」</p>

ブラウザ上の表示例

この部分は「MS 明朝」

この部分は「MS ゴシック」

この部分は「cursive」

対応ブラウザなどのデータ

初期値 ブラウザによる 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / font
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~