font-family

CSSでは、フォントを変更することができます。

本ページでは、font-familyプロパティについて説明します。

font-familyプロパティとは

font-familyプロパティは、表示するフォントを変更します。

font-familyの定義は、以下のとおりです。

【font-familyの定義】
family-name , generic-family
初期値 ブラウザで決定
適用対象 すべての要素
継承 する

family-nameとgeneric-familyは、カンマ(,)で区切って複数指定できます。複数指定した時は、左に記述したものほど優先されます。

値の説明

以下は、font-familyで使える値と説明です。

family-name
メイリオなどのフォントファミリ名です。半角スペースなどを含む名前の場合は、ダブルクォーテーション(")かシングルクォーテーション(')で囲む必要があります。
generic-family
総称ファミリ名です。ゴシック体などを指定して、指定したフォントファミリが使えない時に、ゴシック体の中からブラウザで表示するフォントファミリを決めます。ダブルクォーテーション(")やシングルクォーテーション(')で囲んではいけません。

generic-familyで指定できるキーワードには、以下があります。

serif
明朝体明朝体
sans-serif
ゴシック体ゴシック体
cursive
筆記体行書体
fantasy
装飾的なフォント装飾的なフォント
monospace
等幅フォント等幅フォント

利用例

利用例は、以下のとおりです。

【font-familyの利用例】
body {
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;
}

bodyに記述することで、継承によってすべての要素に適用されます。

左から使えるフォントファミリが選択され、指定したフォントファミリがない場合でもゴシック体が使われるように、最後にsans-serifを指定しています。

英文フォントを先に指定して、英字と日本語で使えるフォントを変えることもできます。また、等幅フォントを使って表示箇所がズレないようにもできます。詳細は、「CSSによるフォントの変更」をご参照ください。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
font-family
【スマートフォン】
項目 Sa An Op Ch Fx Sm
font-family
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る