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 trialBoonsuen 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
- 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
20,786 PointsHi 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
18,788 PointsBoonsuen Oh
18,788 PointsActually I have tested my code (without font weight and style) and it works.