【font-family】CSS文字フォント指定の基本と注意点を徹底解説!

今回ご紹介するのは、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  政府文書に使用される、中国語の特定のスタイルです。
注意
system-uiはFirefox、IE、Firefox Androidでは未対応です。

対応ブラウザ

対応ブラウザは以下の通りです。

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タグごとにフォントを指定することができます。

注意
「fantasy」はブラウザによっては対応していなかったり、表示されるフォントが異なるため、実装するのには不向きです。

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.

フォントをファミリ名で指定する場合は、その処理がうまくいかなかったときのために、必ず最後に総称フォントを付け加えるようにしてください。ファミリ名はコンマ(,)で区切ることができます。

また優先度は先に書いたフォントの方が高いため、総称フォントで上書きされることはありません。

MEMO
ファミリ名を使用する場合は、ブラウザごとにフォントを指定したり、最後に総称フォントを付け加える。

まとめ

今回は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の正しい指定方法・タイプ別おすすめフォント設定例

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?