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

Design Web Typography How to Choose and Use Webfonts Self-hosted Webfonts

David Regel
seal-mask
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points
Posted by David Regel
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points

How to apply fonts to the website

In this stage, we create seperate font-faces which all have the same font-family property. We also have different classes (.italic, .bold, .bold-italic). In the definition of those classes, we set the font-style and/or font-weight.

First question: How does the browser know which font-face we want to use?

Second question: Wouldn't it be better to create font-faces with different names and create classes which call a specific font-face name? By doing so, we could define all properties within the font-face declaration. Instead we set all properties twice, once in our font-faces and once in our classes.

1 Answer

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

You tell the browser which font to use by setting the styling properties. There's an example of this being done in the CSS file in the video at about 5:38.

You could use different names for the different variants, but that would complicate switching styles and weights. To change either of those you would need to change the font-family instead. The styling would become confusing and non-standard and both CSS and JavaScript would need to be altered to work with correctly with fonts defined that way.