Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by stewartwilson2
stewartwilson2
3,161 Points

font-family in "quotes" not a must, is this supposed to be best practice?

font-family in "quotes" not a must, is this supposed to be best practice?

It works both ways:

https://stackoverflow.com/questions/13751412/why-would-font-names-need-quotes

So this is supposed to be best practice rigtht?

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Stewart,

It's correct that quotes are never required but the spec recommends that you quote font names to avoid mistakes in escaping characters.

If punctuation or digit characters appear in certain places within a font name then they have to be escaped with a backslash if you're choosing not to quote your font names. So it's recommended to quote your font names so that you don't have to remember to do this escaping when it's necessary.

Also, if a custom font you're using happens to have the same name as one of the generic family name keywords like serif then it has to be quoted to differentiate the two.

This would be perfectly valid:

font-family: "serif", serif;

The first quoted serif would refer to a custom font named "serif". The second unquoted serif is the css keyword for the generic family name. So in this case, the quotes are required to differentiate from the css keyword.

The following blog post contains more detailed information if you're interested in looking into it further, https://mathiasbynens.be/notes/unquoted-font-family

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Correction: I said that quotes are never required but they're required in that last example where a font name matches a css keyword.

stewartwilson2
stewartwilson2
3,161 Points

Jason, awesome... thanks for sharing the blog post

A.J. Kandy
PLUS
A.J. Kandy
Courses Plus Student 12,422 Points
A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points

They're not necessary for fonts with single-word names like Caslon, Times, or Helvetica, but they are necessary for "Caslon Old Style", "Times New Roman", and "Helvetica Neue"; if you don't wrap them, the browser likely won't load the font properly.

In the Google Fonts example cited in that StackOverflow question, it may simply be that Google Font styles are generated programmatically, so they have quotes whether they need them or not.

If you're hand-writing your CSS, you can eliminate them if not needed.