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 How to Make a Website Customizing Colors and Fonts Pick Fonts and Set Relative Units

Posted by nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Font-family property?

I was following the video on fonts now. I am a bit confused that why first value in the font-family has quotes around it, next value doesn't it?

font-family: 'Montserrat', sans-serif;

Anyone here know why?

Thanks in advance,

2 Answers

Steve McKinney
Steve McKinney
29,274 Points

This post has a pretty in depth explanation of quoted and unquoted font families. http://mathiasbynens.be/notes/unquoted-font-family

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Thanks indeed Steve McKinney

Hannah McPhee
Hannah McPhee
1,785 Points
Hannah McPhee
Hannah McPhee
1,785 Points

Well, I'm not entirely sure this would be the answer, I'm a designer who's still fairly new to web design (further behind then you are), but 'Montserrat' is the name of a particular font, whereas 'sans-serif' is a collective name for types of fonts which lack 'serifs' in their typographic makeup. The font I am typing with now is a sans-serif font. A widely known serif font is Times New Roman. Basically, what I'm saying is that maybe 'Montserrat' is in inverted commas because it is specific, but the sans-serif is not because it is broad.

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Thanks for your response. The reason why we type two values separated by comma, in case if first font is not available, browser should use the next one. 

font-family: 'Montserrat', sans-serif;

According to your reasoning, it kinda make sense. Browsers take one of fonts from collection of sans-serif.

Many thanks for bringing in new perspective of thinking.

Great,

Karthikeyan Palaniswamy

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Hannah and Karthikeyan,

See the article posted by Steve McKinney It explains a lot about this.

The quotes are optional for Montserrat however I would recommend the habit of always quoting font names because there will be times when they have to be quoted. So it's better to always do it

sans-serif used in this context can't be quoted because it is a css keyword. It means that the browser should use the default sans-serif font provided by the system whatever that may be.

You would quote sans-serif if it was the name of an actual font.

This would be valid:

font-family: 'sans-serif', sans-serif;

The first is referring to a font that's actually named 'sans-serif' whereas the second is using the css keyword to refer to a system's default sans-serif font.