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 fbriygig
fbriygig
15,370 Points

Font-weight Question

Rather than grabbing Open Sans 400 and Open Sans 800 from Google fonts, wouldn't it improve performance by just grabbing the 400 and using css rules to change 'font-weight: 800;' as and when you need that extra style?

2 Answers

Roy Penrod
Roy Penrod
19,810 Points

Your browser can't generate the 800 weight of the font from the 400 weight. It just won't change the font weight at all, because there is nothing to change it to.

If all you have is the 400 weight, all you can use is the 400 weight. If you have 400 and 800 weights, you can use 400 and 800 weights, but not 500, 600, or 700.

Orlando Martinez
Orlando Martinez
2,325 Points

I tried it for myself on codepen. I linked the document to the stylesheet where you only benefit from 400. Typed few h1 headings and applied font-family to them. Then I specifically gave one heading a font-weight of 800 and mistook it for an actual change. Thanks.

Roy Penrod
Roy Penrod
19,810 Points

I did the same thing when I was learning how it worked. I wish it really worked that way. hehe

fbriygig
fbriygig
15,370 Points

Ah, I wasn't fully sure which font's the font-weight property could affect and which it couldn't. I have used a lot of the inbuilt font families in the past but this knowledge may save a fair amount of fruitless debugging down the road. Thanks!

Roy Penrod
Roy Penrod
19,810 Points

You're welcome, Dave. Fruitless debugging is how I discover about 90% of this stuff. lol

Orlando Martinez
Orlando Martinez
2,325 Points
Orlando Martinez
Orlando Martinez
2,325 Points

http://codepen.io/Baka/pen/EVOejo

That's a good question. When choosing "ready" on google.com/fonts you are taken to a screen with multiple ways of extracting or using your font. The fourth method,4. Integrate the fonts into your CSS, has this written underneath:

The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles.

I am not sure, but it sounds from a perspective of tasks your browser has to complete to show and read your documents, it will take longer and requires more resources if it has to "generate the necessary browser-specific CSS to use the fonts" Alternatively, to just directing to stylesheet.

If anyone knows, Id like to know as well.