Question

I remember hearing a long time ago that it was considered “best practice” to wrap quotes around font names that contain multiple words in the CSS font-family property, like this:

font-family: "Arial Narrow", Arial, Helvetica, sans-serif;

For the heck of it, I tried removing the quotes from "Arial Narrow" and Safari and Firefox don’t have any problem rendering it.

So, is there any logic to this rule of thumb, or is it just a myth? Was it an issue with older browsers that no longer applies to the current versions? I’ve been doing this for so long that I never stopped to think if it was actually necessary.

Answer 1

The CSS 2.1 spec tells us that:

Font family names must either be given quoted as strings, or unquoted
as a sequence of one or more identifiers. This means most punctuation
characters and digits at the start of each token must be escaped in
unquoted font family names.

It goes on to say:

If a sequence of identifiers is given as a font family name, the
computed value is the name converted to a string by joining all the
identifiers in the sequence by single spaces.

To avoid mistakes in escaping, it is recommended to quote font family
names that contain white space, digits, or punctuation characters
other than hyphens:

So yes, there is a difference, but one that’s unlikely to cause any problems. Personally, I have always quoted font names when they contain spaces. In a few (presumably very rare) cases, the quotes are absolutely required:

Font family names that happen to be the same as a keyword value
(‘inherit’, ‘serif’, ‘sans-serif’, ‘monospace’, ‘fantasy’, and
‘cursive’) must be quoted to prevent confusion with the keywords with
the same names. The keywords ‘initial’ and ‘default’ are reserved for
future use and must also be quoted when used as font names.

Also note that punctuation such as / or ! within an identifier may also need to be quoted or escaped.