ほんっとにはじめての HTML5 と CSS3

font-familyプロパティは、要素で使うフォント（書体）を指定するプロパティです。

これは他のプロパティと指定の仕方がちょっと違ってて、複数の値を優先順（使って欲しい順）に並べて指定します。
フォントを限定しない、というか できない。ユーザーの環境によって入ってるフォントが違うから。
ブラウザに「このフォントを使ってほしいけど、それが無ければコレ、それも無ければコレ...」といった具合で指示するために、優先順に並べます。

font-familyプロパティは、他のフォント関連のプロパティとともに、fontショートハンドプロパティで まとめて指定することができます。
今回から数回フォント関連のプロパティの記事が続き、最後にショートハンドでの書き方をまとめます。

【26-1】font-familyプロパティでフォント（書体）を指定しよう　←今日はココ

【26-2】font-sizeプロパティでフォントのサイズを指定しよう

【26-3】font-weightでフォントのウェイト（太さ）を指定しよう

【26-4】font-stretch で condensed などの文字幅を選択しよう

【26-5】font-styleプロパティでフォントを斜体に指定しよう

【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう

【26-7】フォントをまとめて指定する fontショートハンドプロパティ

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font - CSS | MDN

font-familyプロパティの値

font-familyプロパティは、フォントファミリー名の候補を優先順リストで指定し、ブラウザはそのフォントがあれば使い、無ければ次の候補を試す...を繰り返し、最終的に使えるフォントが無かったときは、各ブラウザで決められているデフォルトフォントを使用します。

候補は「,（カンマ）」で区切って並べる

候補は「,（カンマ）」で区切って並べます。

カンマで区切りながら「フォントファミリー名（family-name）」を並べて、一番最後に「総称フォントファミリー名（generic-name）」を書くルールです。

例えばこんなかんじで。

body {
	font-family: Arial, Verdana, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
    }

先に書いたものほど優先順位が高い。ということは、一度使われたら、その次の候補はもう使われません。
そこで、下記のような注意点があります。

「優先順」であるための 書き方の注意

・英語フォントは先に書いたほうが良い
英文字部分（タイトルとか）に、英語用フォントを使いたい場合、日本語フォントを先に書いちゃうと、英文字にそっちを使われます。日本語フォントファミリーの中にも半角英数字はあるので。
英語用フォントをその後に指定しても、英文字部分は最初の選択の日本語フォントのままで差し替わりません。なので、英文字用のフォントは先に書くのがベスト。

・Mac用のフォントを先に書いたほうが良い
Win と Mac には、それぞれシステムフォントがありますが、インストールすれば Macで Winの書体が、Winで Macの書体が使えます。
（Macは Offfice が入っていれば「MS Pゴシック・MS 明朝」などが入ってるはず。ユーザーが自分で外していなければ）
で、Macは、Macのデフォルトフォントを見慣れていると、Win用の書体で表示すると美しくない。（OSの違いの影響か、ベースラインが変だったりもします）
ですので、Macに Macのデフォルトフォントを使わせるために先に書きます。Win用のフォントをその後に書けば、Macには使われず Winには使われます。

「総称フォントファミリー名」を最後に書く

下のサンプルコードで 最後に書いている「sans-serif」が「総称フォントファミリー名（generic-name）」です。
これはフォントの分類上の名前です。

body {
	font-family: Arial, Verdana, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
    }

ブラウザは、候補の「フォントファミリー名」に使えるのが無かったら、デフォルトフォントを使います。
ですが、ページのデザイン的に「明朝体にしたい」のに、ブラウザのデフォルトがゴシック体だったら、目指すデザイン意図が違っちゃう。
そこで、「指定した書体がぜんぜん無くても、せめて明朝で」といった意図で、最後に「総称フォントファミリー名（generic-name）」を指定します。

「総称フォントファミリー名（generic-name）」には serif（明朝体）・sans-serif（ゴシック体）・monospace（等幅フォント）・cursive（筆記体, 草書体）・fantasy（装飾フォント）という 5種類があります。

デジタルフォントの世界をザッと図説すると、こんなかんじです。

「フォントファミリー名」「総称フォントファミリー名」の font-familyプロパティでの指定のルールについて、順に説明します↓

フォントファミリー名（family-name）は書体のセット名

フォントファミリー名（family-name）は、フォントの「セット名」です。
同じフォントでも、ウェイト（太さ）・文字幅・斜体などを変えたバリエーションが用意されています。（バリエーションが無いフォントもあるけど）

例えば下図のように、太さ・文字幅・斜体などによって「フォント名」が違ってます。それをひっくるめたファミリーとしての名前がフォントファミリー名（family-name）です。

「" "」か「' '」の「引用符」で囲むルールがあります

フォントファミリー名（family-name）のうち、
・名前の中に 半角スペースがあるもの
・名前に 全角テキスト（漢字やカナなど）があるもの
は、引用符「" "（ダブルクォーテーション）」または「' '（シングルクォーテーション）」で囲まなければなりません。

半角英字ワンフレーズの名前以外は「" "」か「' '」で囲んでおけば間違いないです。

body {
	font-family: Arial, Verdana, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
    }

最後の総称フォントファミリー名（generic-name）は 引用符で囲まないのがルール。

総称フォントファミリー名（generic-family）は分類名

総称フォントファミリー名（generic-name）は、フォントの「分類上の名前」で、
serif　sans-serif　monospace　cursive　fantasy の5種類があります。

serif（日本語書体ではいわゆる明朝体）

serif（セリフ）は、文字のストロークの端にある小さな飾りのこと。
（タイポグラフィの世界で「うろこ」とか「ひげ」とも呼びます）
その小さな飾りが付いたフォントの総称を ローマン（Roman）体とも呼びますが、CSSの font-family では「serif（セリフ）」と呼びます。

日本語書体の「明朝体」のフォントは「serif」に分類されていますので、「serif」と指定されていたら、日本語テキストは明朝体で表示されます。

フォント見本はこんなかんじ。
大文字の「Q」や 数字を見比べると違いがわかりやすいかも。

＊システムに入って無ければ、ブラウザデフォルトフォントで表示されます
＊欧文フォントに日本語の字体は無いので、そこはブラウザデフォルトフォントで表示されます

ちなみに、上の見本のソースコードはこんなかんじで作っています。

<div class="mihon">
  <span style="font-family:'Times New Roman',Times,serif">"Times New Roman"<br>  
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'Lucida Bright',serif">"Lucida Bright"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'Palatino Linotype',Palatino,serif">"Palatino Linotype"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:Georgia,serif">"Georgia"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro',serif">"ヒラギノ明朝"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:YuMincho,'Yu Mincho M','游明朝',serif">"游明朝"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'HGS明朝E',serif">"HGS明朝E"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'ＭＳ Ｐ明朝','MS PMincho',serif">"ＭＳ Ｐ明朝"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:serif">serif のみで指定<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
</div>

<style>
div.mihon {
    font-size:1.2rem;
    line-height:1.2;
    color:black;
    border:solid 1px #ccc;
    padding:0 .7em}
div.mihon span {
    display:block;
    margin:1em 0}
</style>

sans-serif（日本語書体ではいわゆるゴシック体）

sans-serif（サンセリフ）は、「セリフが無い」フォントの総称です。
「sans-」はフランス語で「〜が無い」って意味なんだそうです。

日本語書体の「ゴシック体」のフォントは「sans-serif」に分類されますので、「sans-serif」と指定されていたら、日本語テキストはゴシック体で表示されます。

フォント見本はこんなかんじ。
Segoe UI は Winのみのフォント、San Francisco は Mac のみのフォントです。

＊システムに入って無ければ、ブラウザデフォルトフォントで表示されます
＊欧文フォントに日本語の字体は無いので、そこはブラウザデフォルトフォントで表示されます

上の見本のソースコードはこんなかんじで作っています。

<div class="mihon">
  <span style="font-family:Arial,sans-serif">"Arial"</span>
  <span style="font-family:Verdana,sans-serif">"Verdana"</span>
  <span style="font-family:'Trebuchet MS',sans-serif">"Trebuchet MS"</span>
  <span style="font-family:'Century Gothic',sans-serif">"Century Gothic"</span>
  <span style="font-family:'Avenir',sans-serif">"Avenir"</span>
  <span style="font-family:Segoe UI,sans-serif;">"Segoe UI"</span>
  <span style="font-family:-apple-system,BlinkMacSystemFont,sans-serif;">"San Francisco"</span>
  <span style="font-family:'ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','HiraKakuProN-W3','Hiragino Kaku Gothic Pro',sans-serif">"ヒラギノ角ゴ"</span>
  <span style="font-family:YuGothic,'游ゴシック Medium','Yu Gothic Medium','游ゴシック','Yu Gothic',sans-serif">"游ゴシック"</span>
  <span style="font-family:'メイリオ',Meiryo,sans-serif">"メイリオ"</span>
  <span style="font-family:'ＭＳ Ｐゴシック','MS PGothic',sans-serif">"ＭＳ Ｐゴシック"</span>
  <span style="font-family:sans-serif">sans-serif のみで指定</span>
</div>

monospace（等幅フォント、固定幅フォント）

monospace（モノスペース）は、等幅フォント、固定幅フォントとも呼ばれ、文字の幅が固定幅になっているフォントの総称です。

最初の等幅フォントは、タイプライターの文字だって。等幅しかタイプできなかったんですね。
等幅でないフォントは、文章になった時に読みやすいように 1文字ごとにプロポーションを変えたものなので、プロポーショナルフォントとも呼びます。

初期のコンピュータフォントは、表示もプリントも「等幅フォント」だったそうです。
等幅フォントは、フォントデータ量が少なく済んで、表示処理も速いから。

昔は当然、今よりマシンの処理能力が低かったから、等幅だったですね。
Mac の等幅フォント「Monaco」は大昔からあって今でも現役。Mac日本語OS に始めて搭載された日本語フォントは「Osaka」ですが、これも今でも現役です。
Winの等幅フォント「ＭＳ ゴシック」も Windows 3 で登場して今も現役。
（ＭＳ Ｐゴシックは「ＭＳ ゴシック」のプロポーショナルフォント という意味なんだそうです）

というわけで 等幅フォントは、ソースコードを表現する時などによく使われます。
<code>要素のデフォルトのスタイルが等幅ですよね。

フォント見本はこんなかんじ。

＊システムに入って無ければ、ブラウザデフォルトフォントで表示されます
＊欧文フォントに日本語の字体は無いので、そこはブラウザデフォルトフォントで表示されます

上の見本のソースコードはこんなかんじ。

<div class="mihon">
  <span style="font-family:Courier,monospace">"Courier"</span>
  <span style="font-family:'Courier New',monospace">"Courier New"</span>
  <span style="font-family:Monaco, monospace">"Monaco"</span>
  <span style="font-family:'Lucida Console',monospace">"Lucida Console"</span>
  <span style="font-family:menlo,monospace;">"Menlo"</span>
  <span style="font-family:'Osaka－等幅',Osaka-mono,monospace">"Osaka－等幅"</span>
  <span style="font-family:'ＭＳ ゴシック','MS Gothic',monospace">"ＭＳ ゴシック"</span>
  <span style="font-family:monospace">monospaceのみで指定（ブラウザデフォルトフォント）</span>
</div>

cursive（筆記体、草書体）

cursive（カーシブ）は、筆記体・草書体のフォントの総称です。
イタリック体よりも装飾的というか、グリフが繋がっているように見せたり、ペンで手書きしたようなフォントです。

日本語システムフォントではコレに分類されたものは無いようですが、cursiveで指定するとデフォルトフォントが「斜体」で表示されるブラウザもあります。
たいていは日本語フォントはデフォルトフォントがそのまま表示されます。

フォント見本はこんなかんじ。

＊システムに入って無ければ、ブラウザデフォルトフォントで表示されます
＊欧文フォントに日本語の字体は無いので、そこはブラウザデフォルトフォントで表示されます

上の見本のソースコードはこんなかんじ。

<div class="mihon">
  <span style="font-family:'Comic Sans MS',cursive">"Comic Sans MS"</span>
  <span style="font-family:'brush script mt',cursive;">"Brush Script MT"</span>
  <span style="font-family:'apple chancery',cursive">"Apple Chancery"</span>
  <span style="font-family:cursive">cursive のみ指定</span>
</div>

fantasy（装飾フォント）

fantasy（ファンタジー）は、凝ったデザインの装飾的なフォントの総称です。
「Papyrus」「Herculanum」などがあります

日本語システムフォントではコレに分類されたものが無く、fantasyで指定しても普通にデフォルトフォントで表示されます。

フォント見本はこんなかんじ。

＊システムに入って無ければ、ブラウザデフォルトフォントで表示されます
＊欧文フォントに日本語の字体は無いので、そこはブラウザデフォルトフォントで表示されます

上の見本のソースコードはこんなかんじ。

<div class="mihon">
  <span style="font-family:papyrus,fantasy;">"Papyrus"</span>
  <span style="font-family:herculanum,fantasy;">"Herculanum"</span>
  <span style="font-family:Impact,fantasy;">"Impact"</span>
  <span style="font-family:'party let',fantasy;">"Party LET"</span>
  <span style="font-family:'curlz mt',fantasy;">"Curlz MT"</span>
  <span style="font-family:harrington,fantasy;">"Harrington"</span>
  <span style="font-family:fantasy;">fantasy のみ指定</span>
</div>

日本語サイトでの font-family の指定サンプル

実際の日本語サイトで指定する font-family のサンプルをいくつかあげておきます。
（2018年3月時点のフォント指定です）

sans-serif（ゴシック体）の指定

ウェブサイトでは、ゴシック系を選ぶ場合が多いと思います。明朝系と比べると、小さめの文字でも判読性が高いので。

で、まずは sans-serif（ゴシック体）の指定サンプルです。
（改行して解説コメントを入れていますが、実際は1行で（コメント無しで）書きます）

body {
	font-family:
	-apple-system, /*San Francisco（iOS9以上とMac OS El Capitanからの欧文フォント）*/
	BlinkMacSystemFont, /*San FranciscoのMac Chrome用*/
	Verdana, /*Win Mac 共に使える（はずの）欧文フォント*/
	"Hiragino Sans", /*Mac OS El Capitanからのヒラギノ*/
	"Hiragino Kaku Gothic ProN", /*Mac OS 10.5(Leopard)からのヒラギノ*/
	"Hiragino Kaku Gothic Pro", /*10.4以前のMacのヒラギノ*/
	Meiryo, /*Windows Vista以降*/
	sans-serif;
    }

プレビューはこちら。

body {
	font-family: sans-serif;
    }

游ゴシック体を含めた sans-serif（ゴシック体）の指定

Win・Mac 共に使える日本語フォント「游書体」は、Windows8以降、MacOS10.9以降から標準フォントになってます。（iOSでは使えません）
同じフォントが使えると、見た目も統一できるので便利ですね。

ただ、共通で使えると言っても、Win・Mac で違いがあり、指定には ちょっと工夫が必要です。

「游ゴシック体」の Win・Mac での違いはこちら。

「游ゴシック」の Win と Mac でのフォントファミリー名の違いまとめです。

「游ゴシック Medium」「Yu Gothic Medium」は、ウェイトを限定している「フォント名」ですが（ファミリー名ではない）、Win ブラウザではコレを font-familyプロパティで指定しても認識するものもあります。

それらを踏まえて指定したサンプルCSSがこちら。
（改行して解説コメントを入れていますが、実際は1行で（コメント無しで）書きます）

body {
	font-family:
	-apple-system, /*San Francisco（iOS9以上とMac OS El Capitan Safariからの欧文フォント）*/
	BlinkMacSystemFont, /*San FranciscoのMac Chrome用*/
	YuGothic, /*Mac用の游ゴシック*/
	"游ゴシック Medium", /*IE11用（日本語名のみに対応）*/
	"Yu Gothic Medium", /*Win Chrome, Edge, Opera, Firefox57以降用*/
	"Hiragino Kaku Gothic ProN", /*游ゴシックがないMac用*/
	"Hiragino Kaku Gothic Pro", /*10.4以前のMacの*/
	Meiryo, /*游ゴシックがないWin用*/
	sans-serif;
    }

Win の Firefox56 までは、游ゴシックを諦めて「メイリオ」にしています。
Win でヒラギノをダウンロードしている人もいるので、ヒラギノは Win用の 游ゴシックのあとに書きました。

プレビューはこちら。

コレ↓は画像です。Mac Firefox(ver57) での表示です。

游ゴシック体の指定2：font-weightプロパティを併用して解決

WIRED.jp では「游ゴシック」をメインに使っていました。（2018年3月時点）
フォント指定はこのようになっています。3行目に注目。「font-weight: 600」にしています。
なるほど、こうしておけば、游ゴシック「レギュラー」は使われないですね。ウェイト問題はコレで解決です。

body {
	font-family: "Helvetica Neue", Helvetica, Arial, YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", Meiryo,"MS ゴシック","MS Gothic",sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5em;
    font-size: 1rem;
    }

通常 font-weight: 400 がノーマルサイズ（ Normal（Regular、Book、Roman））で、500 にすれば Medium が使われますが、この設定ではちょっと太め（600だと Bold ）にしています。（たぶんこの後の 各要素での設定でウェイト指定は変えてると思います）

font-weightプロパティは【26-3】font-weightでフォントのウェイト（太さ）を指定しようで詳細

font-familyで「MS Gothic」なども指定されているので（なぜ等幅？）、それらを取って 並び順も整理してみたのがこちら。

body {
	font-family: "Helvetica Neue",Helvetica,Arial,YuGothic,'Yu Gothic','游ゴシック',"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ", Meiryo,sans-serif;
    font-weight: 500; /*←これはお好みで*/
    font-style: normal;
    line-height: 1.5em;
    font-size: 1rem;
    }

WIRED.jp サイトのプレビューはこちら。（Mac Firefox）

serif（明朝体）の指定

最後に日本語の「serif（明朝体）」での指定です。
本文を明朝体にすると、「読み物」的な雰囲気が出ます。

良い例があったので、「ヤフーニュースの特集ページ」を参考にさせていただきます。
→ 子ども急増「日本一若いまち」愛知・長久手のまちづくり - Yahoo!ニュース
（リンク切れ放置します。ゴメン）

フォントサイズを大きく、line-height（行間）も多めにすると、横書きの明朝でも読みやすくなります。
（下は Mac Firefox でのプレビューです）

フォントの指定はこんなかんじになっていました。ヒラギノ明朝、游明朝などを使っていますね。

font-family:"Times New Roman","ヒラギノ明朝 Pro","Hiragino Mincho Pro","游明朝",YuMincho,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
font-size:17px;
line-height:1.9;

Mac用のヒラギノの指定が古めなので、ちょっと修正してみたらこんなかんじ。
「ＭＳ Ｐ明朝」も敢えて指定しなくて良いと思うので取りました。

font-family:"Times New Roman","Hiragino Mincho ProN","Hiragino Mincho Pro","ヒラギノ明朝 Pro","游明朝","Yu Mincho","HGS明朝E",serif;
font-size:17px;
line-height:1.9;

ファミリー名の英語名と日本語名を併記すべきか

同じフォントファミリーでも、名前が英語表記のものと日本語のものがあります。
例えば「Hiragino Mincho Pro」と「ヒラギノ明朝 Pro」など。

これは、ブラウザによってフォントを認識するのが「英語名」か「日本語名」か違うので、併記する必要があるんです。
が、Mac OS X や iOS は「英語名」だけで十分なんだって。「日本語名」で認識するブラウザは少ないので。
なので、併記が必要なのは Win用のフォントファミリー名です。

また、余談ですが、Mac では「Hiragino Kaku Gothic ProN W6」などの「フォント名（W6とかウェイト名まで入っているもの）」は、認識するブラウザが少ないです。
font-familyプロパティでは、仕様書どおりに「フォントファミリー名」だけを指定して、ウェイトを変えたければ font-weightプロパティ で指定するのがベストだと思う。

font-weightプロパティは【26-3】font-weightでフォントのウェイト（太さ）を指定しようで詳細

次回予告

次回は、フォントサイズを指定する font-sizeプロパティを使おう。
ブラウザデフォルトのフォントサイズは16pxで、<h1> 〜 <h6>要素はブラウザによってデフォルトフォントサイズが決まっています。
これらを 自由に調整できるのが font-sizeプロパティ です。

関連記事

• （ちょっとメモ）@font-face で Webフォントを使おう
• 【26-7】フォントをまとめて指定する fontショートハンドプロパティ
• 【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう
• 【26-5】font-styleプロパティでフォントを斜体に指定しよう
• 【26-4】font-stretch で condensed などの文字幅を選択しよう
• 【26-3】font-weightでフォントのウェイト（太さ）を指定しよう
• 【26-2】font-sizeプロパティでフォントのサイズを指定しよう
• 【26-1】font-familyプロパティでフォント（書体）を指定しよう
• 【25-3】クリッピングに便利！ shape-outside と shape-margin
• 【25-2】clip-pathプロパティで SVGのパスを使って切り抜こう
• 【25-1】切り抜き（クリッピング）のための新プロパティ clip-path
• 【24】要素を切り抜き表示する clipプロパティ（非推奨ですが）
• 【23-2】重なり順のルールと 新しいスタックコンテキストができる条件
• 【23-1】要素の重なり順の上下関係を指定する z-indexプロパティ
• 【22-4】スクロールしていくとピタッと固定する position: sticky

Tweet

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)