今回ご紹介するのは、CSSで文字のフォントを指定したり、書式を設定したり、装飾方法を指定したりするfont-familyプロパティ！CSS内で簡単に指定でき、Webページに彩を加えることができる便利なプロパティです。
CSSでfont-famiyを使ってフォントを変更する方法とは？
今回は、font-familyの
・基本的な使い方
・設定できる値一覧
・font-familyの実用例
について説明します。実用例に関しては、実際にサンプルコードを用いてご説明しますので、ぜひ参考にしてみてくださいね！
目次
font-familyとは
font-familyの読み方
font-familyは「フォントファミリー」と読みます。font-familyは日本語のフォントと同じように使用される名詞です。
font-familyの説明
font-familyはCSSのプロパティの一種で、指定することで文字に効果を与えることができるタグです。単純にフォントを指定するだけでなく、幅の設定、数式指定、絵文字指定など、文字の装飾に関するあらゆる機能を兼ね備えています。
font-familyで利用できる値
font-familyでは以下の値を使用してフォントの種類を指定します。
| 値 | 説明 |
|---|---|
| sans-serif | ゴシック系のフォントを指定します。 |
| serif | 明朝系のフォントを指定します。 |
| cursive | 筆記体・草書体・イタリック体のフォントを指定します。 |
| fantasy | 様々な装飾的なフォントを指定します。 |
| monospace | 等幅フォントを指定します。 |
| system-ui | 指定されたプラットフォームの既定のユーザインタフェースフォントを参考に、文字フォントを決定します。 |
| ui-sans-serif | ユーザインタフェース既定のゴシック系フォントです。 |
| ui-monospace | ユーザインタフェース既定の等幅フォントです。 |
| ui-rounded | ユーザインタフェース既定の丸文字フォントです。 |
| math | 数式を表現するためのフォントです。 |
| emoji | 絵文字を表示するためのフォントです。 |
| fangsong | 政府文書に使用される、中国語の特定のスタイルです。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 1 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 3 |
| Opera | 3.5 |
| Safari | 1 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 1 |
| Android版Chrome | 18 |
| Android版Firefox | 4 |
| Android 版 Opera | 10.1 |
| iOS版Safari | 1 |
| Samsung Internet | 1.0 |
font-familyの基本的な使い方
font-familyの使い方
まずは単純に、文字を記述するpタグごとにプロパティを適用する方法をご紹介します。pタグ内にclass属性を入れ、固有の名前を付けておくことでpタグごとにフォントを指定することができます。
See the Pen
font-family基本 by rabbittyu (@rabbittyu)
on CodePen.
font-familyをWebページに実装する
font-familyの効果はわかりましたが、実際に導入する際はどこに入れるのでしょうか？一般的にはpタグではなく、bodyタグにfont-familyを適用し、HTML文書全体にプロパティが適用されるように設定します。
See the Pen
font-family実装 by rabbittyu (@rabbittyu)
on CodePen.
ここではlinkタグを使用していませんが、実装する場合はlinkタグでcssが記載されているファイルを指定してください。
font-familyの応用的な使い方
font-familyを上書きする
font-familyプロパティはbodyタグに適用すると説明しましたが、フッターやサイドなど、要所要所でフォントや装飾を変更したい場合は上書きすることもできます。
bodyタグにfont-familyを適用した後、変更したい部分が含まれるタグを指定し、そのままfont-familyプロパティを記載するだけ！フォントを変更するだけですが、より分かりやすいページを作成することができました。
See the Pen
font-family上書き by rabbittyu (@rabbittyu)
on CodePen.
font-familyで任意の文字フォントを指定する
ここでfont-familyの真価である、詳細なフォントの指定方法をご紹介します。しかし表示するブラウザごとでフォントが異なるため、使用する際には十分な注意が必要です。
font-family: “Century Gothic”;
ダブルクォーテーション（“”）で囲った部分が、ファミリ名と呼ばれる部分です。ここでより詳細なフォント指定ができます。ダブルクォーテーションで囲うのはファミリ名だけで、「sans-serif」や「serif」などの総称フォントにはダブルクォーテーションは必要ありません。
See the Pen
font-family ファミリ名 by rabbittyu (@rabbittyu)
on CodePen.
フォントをファミリ名で指定する場合は、その処理がうまくいかなかったときのために、必ず最後に総称フォントを付け加えるようにしてください。ファミリ名はコンマ（，）で区切ることができます。
また優先度は先に書いたフォントの方が高いため、総称フォントで上書きされることはありません。
まとめ
今回はCSSで文字を装飾するプロパティ【font-family】についてご紹介しました。font-familyは便利なプロパティですが、使用する場合はブラウザ環境に留意が必要です。
しかしフォントを変えるだけで重要な部分を際立たせたり、他のサイトと差を付けたり、よりオリジナリティあふれるサイトが作成できたり、デザイン性はかなり向上するでしょう。そのためにしっかり以下のポイントは最低限押さえておきましょう！
・font-familyはbodyタグに使用して、ページ全体にプロパティを適用する
・font-family内でファミリ名を使用する際は、ダブルクォーテーションで囲う
・ファミリ名を使用した際は、最後に総称フォントを指定してブラウザ環境に留意する
参考文献：
MDN web docks font-family
CSSでfont-familyを使ってフォントを指定する方法【初心者向け】
sans-serif、serif 以外にもあるCSSフォントファミリーのキーワード
総称ファミリ名分類のフォント名一覧
【2020年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
