font-familyとは
font-familyとは、CSSのプロパティ（設定項目）のひとつで、これを指定すると、フォント（文字）の種類を変更することができます。
構文
font-family: フォント名 ;
でフォントを変えられます。
使用できるフォント名
よく使われているフォントのリストです。
| 総称ファミリー | フォント名 |
|---|---|
| sans-serif (ゴシック系フォント） | sans-serif |
| arial | |
| arial black | |
| Impact | |
| MS Sans Serif | |
| serif（明朝系フォント) | serif |
| Century | |
| MS Serif | |
| Times New Roman | |
| monospace(等幅フォント） | monospace |
| Courier | |
| MS ゴシック | |
| fantasy(装飾系フォント） | fantasy |
| Monotype Corsiva | |
| cursive(筆記体フォント） | cursive |
| Comic Sans MS | |
| 日本語フォント | MS UI Gothic |
| MS Pゴシック | |
| メイリオ | |
| 游ゴシック/游ゴシック体 | |
| ヒラギノ角ゴシック | |
| ヒラギノ丸ゴ ProN | |
| Droid Sans | |
| 指定したフォントがWebページを閲覧する人のPCやスマホに対応していないときは、意図しない表示になってしまうことがあります。 | |
| これを避けるために、font-familyには複数のフォントを指定し、ひとつはすべりどめのフォントを記載しておくことが推奨されています。すべりどめは「総称ファミリー」とよばれ、特定のフォントがなくても似たフォントのグループの中から自動的に表示してくれます。 |
フォント指定
【例】
HTML
<div class="sample"> ABC123あいうえお愛 </div>
CSS
.sample {
font-size: 20px;
font-family: "serif";
}
上記のように記述すると、ABC123あいうえお愛のフォントが変わります。
複数のフォントの指定
複数のフォントを指定する時は、以下のルールがあります。
①優先度の高いものから先に記述する
②フォント名とフォント名の間は、「,」（カンマ）で区切る
③フォント名にスペースが含まれる場合は、「'」（クォーテーション）か「"」（ダブルクォーテーション）で囲む
④滑り止めの総称ファミリーを最後に記述する
【例】
HTML
<div class="sample2"> ABC123あいうえお愛 </div>
CSS
.sample {
font-size: 20px;
font-family: "YuGothic","Yu Gothic","ヒラギノ角ゴ","sans-serif";
}
参考フォント
Font-familyメーカー