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 Foundations Web Typography Web Fonts

Posted by Beatriz Osorio
Beatriz Osorio
14,907 Points

@font-face question

Hello! I was following the Web Fonts video, and after adding the following @font-face rule I was not able to see the "Droid Serif" in any browser but IE...

@font-face {
    font-family: "DroidSerifBold";
    src: url('../fonts/DroidSerif-Bold-webfont.eot');
    src: url('../fonts/DroidSerif-Bold-webfont.eot?#iefix') format ('embedded-opentype'),
         url('../fonts/DroidSerif-Bold-webfont.woff') format ('woff'),
         url('../fonts/DroidSerif-Bold-webfont.ttf') format ('truetype'),
         url('../fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format ('svg');
    font-weight: bold;
    font-style: normal;
}

After playing around with Firebug, and the developer tools, I noticed that browsers were only loading the first source

src: url('../fonts/DroidSerif-Bold-webfont.eot');

So I deleted the "format" part in all my sources with my @font-face rule ended up looking like this:

@font-face {
    font-family: "DroidSerifBold";
    src: url('../fonts/DroidSerif-Bold-webfont.eot');
    src: url('../fonts/DroidSerif-Bold-webfont.eot?#iefix'),
         url('../fonts/DroidSerif-Bold-webfont.woff'),
         url('../fonts/DroidSerif-Bold-webfont.ttf'),
         url('../fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold');    
    font-weight: bold;
    font-style: normal;
}

With this fix the "Droid Serif" worked in all browsers.

Is there any error in the video? Or has the standard changed?

2 Answers

Lindsey Di Napoli
Lindsey Di Napoli
19,572 Points
Lindsey Di Napoli
Lindsey Di Napoli
19,572 Points

I don't know if this is a reason why it wouldn't work, but I noticed in your code above you have a space between format and the parentheses. So instead of 

format('embedded-opentype')

you have 

format ('embedded-opentype')

, etc for all of your formats.

Anyway, the formatting is indeed correct other than the space issue. Did you check in the firebug Console to make sure the files were not showing errors?

Beatriz Osorio
Beatriz Osorio
14,907 Points
Beatriz Osorio
Beatriz Osorio
14,907 Points

Thanks! It was the space :D