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 CSS Basics (2014) Understanding Values and Units Text Styles

rajbee
rajbee
6,657 Points
Posted by rajbee
rajbee
6,657 Points

Need some notes on fonts

You said that font-weights bolder, lighter etc are rarely used because most fonts don't include them. Why ? Also, how do you see if a font has included them or not. Maybe there is some file that stores all these fonts and it has no entries for lighter ???

2 Answers

heidiatwood
heidiatwood
6,013 Points
heidiatwood
heidiatwood
6,013 Points

If you're using a font other than the web-safe variety, you should be able to see what font weights are supported before adding it to your website. For example, if you decide to use a google font, when you add it to your collection and then view it, it will show you the various weights and styles that are supported.

James Anwyl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

To add on to what Heidi is saying. A 'web-safe font' is something like Times New Roman or Arial which comes already installed on most computers. A great resource for free custom fonts is Google Web Fonts - you can choose a font family and see what styles and weights it contains before you use it.

An example of a font with a variety of different weights and styles is Open Sans - This font could be used in many different scenarios. It would work well for body text as well as headings because it contains light, bold and italic styles.

An example of a font with only one weight/style is Bangers - This font would work well for headings, but wouldn't be a good choice for body text due to the lack of variety.

Check out the Web Typography course which covers fonts in great detail.

Hope this helps :)