Search code examples
cssfontsconventions

Why would font names need quotes?


As far as I know, one needs to use double or single quotes for fonts if they contain spaces, like:

font-family: "Times New Roman", Times; 
font-family: 'Times New Roman', Times;

But on Google Fonts (http://www.google.com/webfont), I also see

font-family: 'Margarine', cursive;

Some even use it like so:

font-family: 'Margarine', 'Helvetica', arial;

I find this weird, as the following works as well:

font-family: Arial, Helvetica, sans-serif;
font-family: Cambria, serif;

So what is the correct usage of quotes around font names in CSS?


Solution

  • 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”