font-family
書体
文字の書体（フォント）を指定します。候補をカンマで区切って複数書き、最後に総称ファミリーを書くのが基本です。
サンプルコード
実行結果
解説
font-family には、使いたいフォント名を優先順にカンマ区切りで並べます。ブラウザは左から順に、利用者の環境にあるフォントを探して使います。
最後には sans-serif（ゴシック体）や serif（明朝体）などの総称ファミリーを書きます。どのフォントも見つからないときに、それに近い書体が使われます。
フォント名に空白や日本語が含まれる場合は、"Noto Sans JP" のように引用符で囲みます。
ページ全体のフォントを決めるときは body に書きます。フォントの指定は親要素から子要素へ継承されるため、body に書けばページ内のすべての文字に効きます。
フォントは必ず指定します。何も指定しないとブラウザの初期値が使われ、閲覧する環境（OS・ブラウザ）によって見た目が変わってしまうためです。
英語フォントを先、日本語フォントを後に書きます。英語フォントには日本語の文字が入っていないので、アルファベットは英語フォント、日本語は後ろの日本語フォントで表示されます。日本語フォントを先に書くと、日本語フォントに入っている英字が使われてしまいます。
応用例・注意点
総称ファミリー
| 値 | 説明 |
|---|---|
sans-serif | ゴシック体（ひげのない書体） |
serif | 明朝体（ひげのある書体） |
monospace | 等幅フォント |
system-ui | OSの標準UIフォント |
cursive / fantasy | 筆記体 / 装飾的な書体 |
Webフォントを使う
Google Fonts などで読み込んだフォントを、通常のフォント名と同じように指定します。
英語フォント → 日本語フォント → 総称ファミリーの順に書く
閲覧している端末に Avenir がなければ Helvetica Neue…と順に探して表示します。どのフォントもインストールされていない場合は、その端末にある sans-serif（ゴシック体）で表示します。
案件等で使い回せるフォントファミリーの設定テンプレ
ゴシック2種・明朝2種のテンプレートです。どのフォントを優先するかはデザインデータをしっかり確認してから決めます。
注意点
- 01利用者の環境にないフォントは表示されません。必ず代わりの候補と総称ファミリーを書きます。
- 02フォント名に空白や日本語が入るときは、引用符（' または "）で囲みます。
- 03フォントの優先順位は、デザインデータをしっかり確認してから決めます。
- 04日本語のWebフォントはファイルが大きいため、使う太さを絞って読み込みます。
案件等でよく見かける和文フォント
デザインデータでよく指定されている日本語フォントです。名前を見て「ゴシックか明朝か」がわかると、総称ファミリー（sans-serif・serif）の選び方も迷いません。
| ゴシック | 明朝 |
|---|---|
| Noto Sans（Noto Sans JP） | Noto Serif（Noto Serif JP） |
| ヒラギノ角ゴシック | ヒラギノ明朝 |
| 源ノ角ゴシック | 源ノ明朝 |
| メイリオ | MS P明朝 |
游ゴシック・游明朝の注意
- 近年、特定のブラウザ環境では、端末に入っている（ローカルフォントの）游ゴシックが使えなくなってきています。
- そのため、Noto Sans JP などの Webフォントを読み込んで使う案件が増えています。
テンプレートの「ヒラギノ角ゴ Pro」は古い名前で、今の Mac では「ヒラギノ角ゴ ProN」や "Hiragino Sans" がよく使われます。案件のレギュレーションに合わせて書き換えてください。