Зачем названиям шрифтов в CSS нужны кавычки?

Всегда можно поместить конкретное название семейства шрифтов в кавычки, двойные или одинарные, поэтому Arial, «Arial», и ‘Arial’ эквивалентны. Только определенные в CSS общие названия семейств шрифтов, такие как sans-serif, должны быть написаны без кавычек.

Вопреки распространенному мнению, имя шрифта, состоящее из имен, разделенных пробелами, таких как Times New Roman, не обязательно заключать в кавычки. Однако, спецификация рекомендует “заключать в кавычки имена семейств шрифтов, которые содержат пробелы, цифры или знаки препинания, отличные от дефисов”

Когда заключать в кавычки семейство шрифтов?

Необязательно

font-family: Times New Roman; /* Это эквивалентно */
font-family: 'Times New Roman';
font-family: "Times New Roman";

font-family: Unique Ode™ 😊 Épopée; /* Это эквивалентно */
font-family: "Unique Ode™ 😊 Épopée";

font-family: "Answer #42"; /* Это эквивалентно */
font-family: "Answer \23 42";
font-family: Answer \23 42;

Пока имя шрифта содержит только:

• буквы
• цифры
• тире
• подчеркивание
• не ASCII Юникод
• одиночные внутренние пробелы
• обратная косая черта шестнадцатеричных кодов символов

тогда кавычки необязательны. Одинарные или двойные кавычки. Регистр игнорируется. Есть несколько странных крайних случаев: слова без кавычек не должны начинаться с цифры, тире-тире или тире-цифры.

Необходимо

font-family: "Intro Rust 2" /* Слова без кавычек не должны начинаться с цифр. */
font-family: "Serif"; /* Для вашего собственного Serif, а не общего с засечками. */
font-family: "Yin/Yang"; /* Цитата или код большинства знаков препинания ASCII. */

Следует

font-family: "Initial Seals JNL" /* 'initial' и 'default' зарезервированные слова. */
font-family: "Omar Serif" /* Общие имена также могут быть зарезервированными словами? */

Не должно

font-family: monospace; /* Общие шрифты НЕ должны заключаться в кавычки. */
font-family: serif;
font-family: sans-serif;
font-family: cursive;
font-family: fantasy;