CSSでフォントを指定する際に使うfont-familyプロパティ。CSSを使う人なら必ず一度は書いたことがあるであろうプロパティの一つですが、以前から僕には一つ疑問がありました。それは何かと言うと、タイトルにもありますが、値を指定する際にクォーテーションが必要かどうか？ ということです。
ちなみに以下のCSSはいずれも正常に動作します。
font-family: メイリオ, Verdana; font-family: 'メイリオ', 'Verdana'; font-family: "メイリオ", "Verdana";
ネットで軽く検索をかけてみると、「スペースを含むフォント名にはクォーテーションが必須」や「日本語を含むフォント名にはクォーテーションが必須」といった意見が見つかりますが、試しに実際に動かしてみると、どうも正常に動くようです。果たしてこれはブラウザの忖度なのか？ あるいはネット上の意見が間違っているのか？ というわけで少し深掘りしてみることにしました。
結論から言うと、おそらく、日本語を含む場合もスペースを含む場合もクォーテーションは必要ありません。（※ スペースが2つ以上連続で続く場合を除く）
調べてみる
こういう時はやはり規格の仕様をみるのが手っ取り早いです。CSSはW3Cが仕様を制定していて、フォントに関する仕様は CSS Fonts Modules Level 3 でまとめられているみたいです。現時点ではまだ勧告候補で最終決定盤ではないみたいですが、まあいいでしょう（適当）。
CSS Fonts Modules Level 3 の font-family の項には以下のように書かれています。
Font family names other than generic families must either be given quoted as strings, or unquoted as a sequence of one or more identifiers.
汎用ファミリー以外のフォントファミリー名は、
stringsとしてクォーテーションで囲うか、あるいはひとつ以上のidentifiesの並びである必要があります。
！！ これは重要な情報です。フォントファミリー名の指定が identifies の並びであればクォーテーションは必要ないのです。ここでいう identifies は以下のように定義されています。
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.
要は identifies は[a-zA-Z0-9]、ISO 10646のU+00A0以上、ハイフン(-)、アンダースコア(_)のみを含み、かつ、数字、2つのハイフン、1つのハイフンと数字では始まらないもののことを指します（わかりづら）。ここで重要なのは、日本語はU+00A0以上なので identifies に含むことができるということです。
つまり…
これまでのことを総合するとこうです。
identifiesの並びであればクォーテーションは必要ない。- 日本語も
identifiesに含まれる。
つまり、フォントファミリー名に日本語が含まれようと、スペースが含まれようと、全て identifies の並びとして解釈され、クォーテーションは必要ないようです。
ひとつ気がかりなのが identifies の『並び』と言う部分です。僕は並びと言うのをスペース区切りと解釈しました（英語の文章も単語をスペースで区切って並べるし…）が、それがあってるのか正直微妙です。ですがいろんな記事に目を通したところおそらく！ 僕の解釈であっていると思われます。
仕様の続き
To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens:
エスケープ時の間違いを防ぐために、スペース、数字、ハイフン以外の区切り文字を含む場合、クォーテーションで囲うことをオススメします。
しかし強制ではないものの、仕様ではスペースを含む場合はクォーテーションで囲うことをオススメしているので、特に理由のない限り結局はクォーテーションを使ったほうがいいのかもれません。
注意点
ちなみに絶対クォーテーションが必要なケースが2つあって、1つはフォントファミリー名が inherit や serif などのCSSで使用するキーワードと同じ場合。
もう1つは、フォントファミリー名の中で2つ以上のスペースが連続で続く場合です。と言うのも、identifies の並びで記述された値は全てのidentifies をスペースで結合した文字列に変換されるため、2つ以上のスペースは1つのスペースに変換されてしまいます。まあそんなフォント名があるかどうかわかりませんが、そういったフォントを扱う場合は指定に気をつける必要がありそうです。
はじめまして。
とっても分かりやすい記事を書いてくださり、ありがとうございます！
図々しくリクエストなのですが、
『ちなみに絶対クォーテーションが必要なケースが2つあって、1つはフォントファミリー名が inherit や serif などのCSSで使用するキーワードと同じ場合。』
の部分を、もう少し詳しく説明していただけないでしょうか。
「CSSで使用するキーワードと同じ」というのは、どういう意味なのか知りたいと思っています。
いつかお時間に余裕があることがありましたら、
追記を検討していただければ幸いです！
コメントありがとうございます。
すみません！たしかにわかりづらい書き方ですね…
ここで言っているCSSで使用するキーワードというのは、font-family プロパティで設定できるフォント名以外の値のことをさします。
具体的には、以下のページにある「総称ファミリ名」と「グローバル値」というのがそれに当たります。
https://developer.mozilla.org/ja/docs/Web/CSS/font-family
たとえば
例1) font-family: inherit
と指定した場合と
例2) font-family: “inherit”
と指定した場合で比べるとわかりやすいかもしれません。
例1の場合は「親要素と同じフォントを使用する」という意味になりますが、
例2の場合は「inheritという名前のフォントを使用する」という意味になります。
このように、フォント名がクォーテーションを使わないと別の意味になってしまう場合にクォーテーションが必須となります。
こんな感じなのですがいかがでしょうか…
不明点があればまた遠慮なくお聞きください！
早速、ご丁寧な説明を書いて下さり、
どうもありがとうございました！
リンク先のページも読みながら、自分の不勉強な部分を
調べ直したりしました。
また、２つの例を使ってのご説明が、とても分かりやすかったです。
お言葉に甘えて、もうひとつ質問させていただきます。
「 inherit 」や「 serif 」という名前のフォントがあるのだろうな、と解釈したので、
調べてみました。
でも今のところ、総称ファミリーとして使われる（＝クオーテーションなしで記述する）
以外の例がネット上では見つけられていません。
巷にあるフォント名のリストも見てみたのですが、「 inherit 」や「 serif 」だけの名前のフォントが
見つかりません。
私の解釈や調べ方が間違っているのかも、と思っています。
ココを誤解してるよ！などお気づきの点がありましたら、
お教えいただけたら幸いです。
たくさん説明するのは大変だと思いますので、
とってもゆっくりで構いません！
何度も申し訳ありません。
ちなみに、
「まあいいでしょう（適当）」
とか
「（わかりづら）。」
私も勉強中、よく思うことなので、思わず吹き出しました！
難しい文章中に笑いが仕込まれている（！？）と、
ホッとします！
そうですね、たしかに、「inherit」や「serif」という名前のフォントはもしかしたら無いかもしれないです
フォントの名前をつける人もあらかじめそういう名前は避けてるのかもしれません
多分、「もしあったら」の場合のための仕様なのかなと思います
「CSSではinheritに特別な意味があるから、もしそんな名前のフォントが使いたいならクオーテーションで囲ってね」
て感じですかね
あと @font-face を使えば好きな書式に対して好きな名前を使えるので、
そこで inherit とかを設定したらクオーテーションが必要になるんじゃ無いかなと思います！
文章に関して、お褒めの言葉大変ありがたいです！
今後もご贔屓によろしくお願いします
いつも詳しい説明をしてくださり、どうもありがとうございます。
とっても良くわかりました！！
目からウロコでした。
CSS3を勉強中なのですが、お返事を読んで@font-faceを初めて知ることができ、
調べました。
> あと @font-face を使えば好きな書式に対して好きな名前を使えるので、
> そこで inherit とかを設定したらクオーテーションが必要になるんじゃ無いかなと思います！
目の前がパーッと開けるような、明快な解説でした。
世の中いろんな人がいますから、人の行動は読めない（笑）。
みんながみんな、inherit や serif だけの命名は避けてあげよう、
と気を利かせてくれる訳もなく「オイっっ！！」という場合もある・・・。
人間の多様すぎる振る舞いのおかげで痛い目にあったことがある人々が、
優しさをこめて作ったルールに思えてきました（笑）。
人生の豊富な経験値を感じます。
つまずいた私を、すぐに起こしてくださり（！）、ありがとうございました！！
感謝・感激しています。
私はhysrytさんと違って聡明ではありませんが、地道に勉強頑張ります。
本当にありがとうございました。
またお邪魔させてください。