CSS辞典 font-familyプロパティの解説
フォントを指定する「font-familyプロパティ」の使用方法を掲載
CSS3／2.1
対応ブラウザ
| 初期値 | ブラウザーに依存 |
| 適用される要素 | すべての要素 |
| モジュール | CSS Fonts Module Level3及びLevel4 |
| 継承 | あり |
概要・使用方法
{font-family: フォント名,フォント名,・・・・,一般フォント名;}font-familyプロパティは、フォント名を指定します。フォント名はひとつでも指定できますが、「,（カンマ）」で区切って複数指定することができます。その場合は、左側から優先にユーザー環境で表示可能なフォントが採用されます。
フォントの指定は、文字の全角や半角も含め正確に記述する。
指定したフォントがない場合は、標準フォントが表示されます。もしくは、@font-face規則を使うことにより、フォントをユーザーにダウンロードさせることも可能です。
フォント名の中にスペースが含まれている場合は、「”」か「’」で囲います。
Windowsでは、「メイリオ」、「MS Pゴシック」、「MS P 明朝」、「UDデジタル教科書体」が使用できます。Macであれば「ヒラギノ角ゴシック」、「ヒラギノ明朝」、「ヒラギノ丸ゴ」、「Osaka」などの書体が使用できます。
フォントは、Windows、Mac、スマートフォン（Android、iphoneなど）等のＯＳにインストールされている必要があります。インストールされていない場合は、font-familyで指定しても表示はされません。WindowsとMacどちらにも標準でインストールされているが「游ゴシック」と「游明朝」です。ただし、WindowsとMacでは太さが異なる種類が含まれているため、指定するときは「游ゴシック Medium」をしてすると同じ太さになります。
ブラウザによって、全角文字のフォント名が認識されない場合（Safari）や、逆に日本語フォント名のアルファベット表記が認識されないことがあるため、日本語フォントに関しては日本語表記とアルファベット表記の両方のフォント名を併記したほうがよい。
フォールバックフォントとは？
ユーザーブラウザーで Web フォントがサポートされていない場合やWeb フォントをローディングできない場合、代わりに使用するフォントのことです。
フォールバックフォントは、複数のプラットフォーム（OS）で使用可能なひとつ以上のフォールバックフォント（Georgia、Arial 等）と、それに続く汎用的な font-family 名（serif、sans-serif 等）を含めます。最初のフォントがブラウザで見つからない場合は、２番目、3番目と使用できるフォントを使用します。
一般的なフォント
総称フォントファミリーと呼ばれる代替えメカニズムが利用できます。ファミリー名の値で指定したフォントがユーザーの環境にない場合は、ブラウザーのシステムフォントから以下のキーワードに対応するフォントが表示されます。
| serif | 明朝系（例：Times New Roman（英字にひげ飾り）,MS P明朝） |
| sans-serif | ゴシック系のフォント（例：Helvetica（ひげ飾りがない）、MS Pゴシック, Osaka） |
| cursive | 筆記体のフォント（例：Caflisch Script, Adobe Poetica）、日本では草書・行書体のフォント |
| fantasy | 装飾的なフォント（例：Critter, Cottonwood） |
| monospace | 等幅フォント（例：MSゴシック, Osaka-等幅） |
| emoji | 絵文字用フォント |
| math | 数式を表現するための特別なフォント |
| fangsong | 中国語で使用されるフォントで、仿宋体と呼ばれるフォント |
| system-ui | 使用しているプラットフォーム（OS）のUIと同じフォント |
| ui-serif | 使用しているOSのUIと同じ、serifフォント |
| ui-sans-serif | 使用しているOSのUIと同じ、sans-serifフォント |
| ui-monospace | 使用しているOSのUIと同じ、等幅フォント |
| ui-rounded | 使用しているOSのUIと同じ、ラウンド（丸みを帯びた）フォント |
サンプル
リンクの色が青から赤に変更されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSS font-familyプロパティサンプルページ</title>
<meta charset="uft-8">
<style>
html{
/* 全体のフォントは明朝系 */
font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
font-size:150%;
}
/* フォントを個別指定 */
.fonttype1{font-family: "ＭＳ ゴシック",Sans-Serif; font-size:150%;}
.fonttype2{font-family: "ＭＳ 明朝",Sans-Serif; font-size:150%;}
.fonttype3{font-family: "HG創英角ﾎﾟｯﾌﾟ体",Sans-Serif; font-size:150%; }
.fonttype4{font-family: "游ゴシック Medium",Sans-Serif; font-size:150%;}
.fonttype5{font-family: "游明朝",Sans-Serif; font-size:150%;}
.fonttype6{font-family: "メイリオ",Sans-Serif; font-size:150%; }
.fonttype7{font-family: "Meiryo",Sans-Serif; font-size:150%;}
.fonttype8{font-family: "ヒラギノ角ゴ ProN W3",Sans-Serif; font-size:150%;}
.fonttype9{font-family: "Hiragino Kaku Gothic ProN",Sans-Serif; font-size:150%;}
.fonttype10{font-family: "HGS明朝E",Sans-Serif; font-size:150%; }
.fonttype11{font-family: "Osaka",Sans-Serif; font-size:150%; }
</style>
</head>
<body>
<p>HTML全体のフォントです</p>
<p class="fonttype1">ＭＳ ゴシックフォントです</p>
<p class="fonttype2">ＭＳ 明朝フォントです</p>
<p class="fonttype3">HG創英角ﾎﾟｯﾌﾟ体フォントです</p>
<p class="fonttype4">游ゴシック Mediumフォントです</p>
<p class="fonttype5">游明朝フォントです</p>
<p class="fonttype6">メイリオフォントです</p>
<p class="fonttype7">Meiryoフォントです</p>
<p class="fonttype8">ヒラギノ角ゴ ProN W3フォントです</p>
<p class="fonttype9">Hiragino Kaku Gothic ProNフォントです</p>
<p class="fonttype10">HGS明朝Eフォントです</p>
<p class="fonttype11">Osakaフォントです</p>
</body>
</html>実行結果
HTML全体のフォントです
MS Pゴシックフォントです
MS P明朝フォントです
HG創英角ﾎﾟｯﾌﾟ体フォントです
游ゴシック Mediumフォントです
游明朝フォントです
メイリオフォントです
Meiryoフォントです
ヒラギノ角ゴ ProN W3フォントです
Hiragino Kaku Gothic ProNフォントです
HGS明朝Eフォントです
Osakaフォントです
chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
