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 Basic Web Typography Weights and Styles

Boonsuen Oh
Boonsuen Oh
18,788 Points
Posted by Boonsuen Oh
Boonsuen Oh
18,788 Points

@font-face

In the video, we write same font-family name in each @font-face rule, example code in video.

@font-face {
    font-family: 'Open Sans';
    src: url('webfonts/OpenSans-Regular-webfont.eot');
    src: url('webfonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('webfonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('webfonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

/* ---------------------
    Normal Italic
------------------------ */

@font-face {
    font-family: 'Open Sans';
    src: url('webfonts/OpenSans-Italic-webfont.eot');
    src: url('webfonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('webfonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('webfonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: 400;
    font-style: italic;
}

I want to ask

  1. Can I write different font-family name in each rule, like for the above code, I change the font-family to Open Sans Regular Normal in first rule and Open Sans Normal Italic, after that can I remove the font-weight and style property(are they required?), I think of this because we already have the type face file that has the weight and italic. My code will look like this
@font-face {
    font-family: 'Open Sans Normal Italic';
    src: url('webfonts/OpenSans-Italic-webfont.eot');
    src: url('webfonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('webfonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('webfonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
}

/*And I call it by*/
text {
  font-family: 'Open Sans Normal Italic';
}
/*Instead of with the original code*/
text {
  font-family: 'Open Sans Normal Italic';
  font-weight: 400;
  font-style: italic;
}

Or the code in the video is correct and my concept is wrong? Or explain the correct concept? Will my code is more efficient or makes thing more complicated? Please help, and thanks!

Note: I know with the code in the video, we can apply font weight to classes like .light and .italic and add those classes together to achieve text with light and italic style. Like that.

1 Answer

Matt Milburn
Matt Milburn
20,786 Points
Matt Milburn
Matt Milburn
20,786 Points

Hi Zayn,

You can change the value of font-family per @font-face rule but the font-weight and font-style properties are still required.

Boonsuen Oh
Boonsuen Oh
18,788 Points
Boonsuen Oh
Boonsuen Oh
18,788 Points

Actually I have tested my code (without font weight and style) and it works.