Why would font names need quotes?
You can always put a specific font family name in quotes, double or single, so Arial, "Arial", and 'Arial' are equivalent. Only the CSS-defined generic font family names like sans-serif must be written without quotes.
Contrary to popular belief, a font name consisting of space-separated names such as Times New Roman need not be quoted. However, the spec recommends “to quote font family names that contain white space, digits, or punctuation characters other than hyphens”
When to quote font-family:
Optional
font-family: Times New Roman; /* These are equivalent */
font-family: 'Times New Roman';
font-family: "Times New Roman";
font-family: Unique Ode™ 😊 Épopée; /* These are equivalent */
font-family: "Unique Ode™ 😊 Épopée";
font-family: "Answer #42" /* These are equivalent */
font-family: "Answer \23 42";
font-family: Answer \23 42;
As long as a font name contains only:
- letters
- digits
- dash
- underscore
- non-ASCII Unicode
- single inner spaces
- backslash hexadecimal character codes
then quotes are optional. Single or double quotes. Case ignored. There are some weird edge cases: unquoted words must not start with a digit, dash-dash, or dash-digit.
Must
font-family: "Intro Rust 2" /* Unquoted words must not start with numbers. */
font-family: "Serif"; /* For your own Serif, not the generic serif. */
font-family: "Yin/Yang"; /* Quote or code most ASCII punctuation. */
Should
font-family: "Initial Seals JNL" /* `initial` and `default` are reserved words. */
font-family: "Omar Serif" /* Generic names might also be reserved words? */
Must Not
font-family: monospace; /* Generic fonts must NOT be quoted. */
font-family: serif;
font-family: sans-serif;
font-family: cursive;
font-family: fantasy;
Thanks:
- Article on font names by Mathias Bynens, linked by Stephan B's comment.
- bizworld's point about conflict with generic fonts.
- Mozilla's description of Custom Identifiers.
- W3C spec for font-family and identifiers, linked by Jukka K. Korpela's answer
I've just learned myself that the quotes aren't ever necessary but rather recommended. We all learn something new every day.
The other place you see them is in css properties that require a url
background:url('hithere.jpg');
background:url(hithere.jpg);
Both those statements are going to work exactly the same. Same goes for the fonts, which type of quote you use is irrelevant in this case, just be consistent in how YOU do things and that is all that really matters.