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
Kevin Gresmer
3,020 PointsWhy is this incorrect when trying to use sans-serif as a backup font?
h1 { font-family: 'Lobster', 'sans-serif'; }
2 Answers
Kevin Korte
28,149 PointsLeave off the quote tags around sans-serif. When you're describing a fallback font that is considered "web safe" because most browsers/OS should have that font installed, you don't wrap it in quotes. When you're describing a font that does need the browsers to fetch font files, you put those in quotes.
Kevin Gresmer
3,020 PointsThat worked! I dont remember Nick saying anything about that, but good to know.
Thanks!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Kevin,
It's correct that the generic family names 'serif', 'sans-serif', 'monospace', 'fantasy', and 'cursive' can not be quoted because they are keywords.
However, font family names don't have to be quoted. This would be valid:
font-family: Lobster, sans-serif;Even names with spaces don't have to be quoted which I just learned today.It's recommend to quote names with spaces, digits, or punctuation but not required if you properly escape characters that need escaping.
It seems the only time quotes would be absolutely required is if a family name happened to match one of the keywords. It has to be quoted to avoid confusion.
The following should be valid:
font-family: 'sans-serif', sans-serif;Here the browser would first look for a font named "sans-serif" and if it wasn't available it would then get the default sans-serif font provided by the OS.
Further reading for anyone interested:
http://stackoverflow.com/questions/13751412/why-would-font-names-need-quotes This contains some incorrect answers but they're corrected in the comments.
http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family This is from the spec and not the easiest thing to read. The stackoverflow link is a little easier to read.
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsThanks for the clarification Jason Anello. That's good info right there :)