CSS font names: to quote or not quote?

Published
Written by
John Kavanagh

In CSS font-family declarations there is a question I frequently come across: should you be using double-quotes, single quotes, or no quotes at all for your font name? The answer really depends on your intent. String? Identifier? Keyword? Name? All these elements play a role the need to use quotation marks or not.

A pile of wooden letter blocks used in printing

In simplest terms, the general rule is if you are specifying the exact name of a font then you should use quotes, particularly if your font name has whitespace within it. Otherwise there's a risk that your browser will simply match the first word in the name as a keyword.

Although it's true that whitespace in a name works best when quoted and treated as a string, the reality is a little more complex and is made more complex by inconsistent browser implementation. In order to really understand how these browsers are interpreting your font-family code we need to understand the difference between CSS strings and identifiers first.

Strings & identifiers in CSS

According to W3, strings are defined as1:

Strings can either be written with double quotes or with single quotes. Double quotes cannot occur inside double quotes, unless escaped (e.g., as '\"' or as '\22'). Analogously for single quotes (e.g., "\'" or "\27").

W3 CSS2 Syntax and basic data types, 4.3.7: 'Strings'

Identifiers, however2:

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".

W3 CSS2 Syntax and basic data types, 4.1.3: 'Characters and case'

So, whilst strings may contain whitespace, or characters a-z, A-Z, 0-9, hyphens, and/or underscores (and require quotes); W3 says that an Identifier can be an element name, class, or ID in a selector. If you are using an identifier, like a keyword, then you don’t need quotes. You can specify serif, san-serif, or other generic terms without the need for quotes.

Strings
Use quotes, for example 'Times New Roman' or 'Source Sans Pro'
Identifiers
No Quotes, for example serif or Times (keyword this time - not the specific font name)

Generic family keywords

There are, however, a few exceptions to this rule: generic family keywords. This is best illustrated by using Times as an identifier; Times is one of several 'old-school' web fonts that has the distinction of being so ancient that it can be both a name and keyword. Another example of this is Helvetica (although this is less prevalently available font).

If using a traditional font, you can write these without the use of quotes:


.text{
	font-family: Helvetica
}

This is complicated when you have a font-family and a system font with the same name. font-family: 'san-serif' (with quotes) will instruct the browser to look for a system font called 'San-Serif' to use for the display. Using font-family: san-serif (no quotes) instead will signify that you want to use a default generic replacement for your display font. Often you won't even notice but depending on your visitor's system font library, the difference can be very noticeable!

Websafe fonts

There are some fonts which are so ingrained into computer science and the web that they have the distinction of being both a name and an identifier.

As mentioned earlier this includes Times, and Helvetica but also includes the likes of Impact, Georgia, Monaco, or Tahoma. These can be safely used both with or without quotes but to avoid any confusion, if you want to target a specific font, you should quote it.

Double quotes or single?

Despite very clear specifications, the debate persists over whether you should be using single or double quotation marks.

Although at present the preference appears to be to use single-quotes (helped in part by the rise of online font services like Typekit and Google Fonts), it really boils down to personal preference; many long-time coders will often prefer doubles purely for the sake of tradition or habit.

For all intents and purposes, these are both the same:


.text{
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.text{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Browsers are smart enough to interpret your font-intentions regardless of the type of quote mark punctuation you use.

Summary

So, as a very quick-fire summary:

  • If it's an identifier, don't use quotes;
  • If it's a string, always use quotes;
  • Font families (serif, sans-serif, monospace, etc) do not need quotes;
  • Font names do need quotes;
  • Use single quote marks.. or double-quotes.. whatever you are more comfortable with;
  • Validate your markup and CSS: you would be surprised how often a little oversight will be the root of your problems.
Comments powered by Disqus
Top