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

Krista Gomke
Krista Gomke
4,426 Points
Posted by Krista Gomke
Krista Gomke
4,426 Points

When I follow along with my Workspace, my preview won't show the DroidSerifBold font properly...what am I doing wrong?

I am copying the coding exactly as in the video, but my src is highlighted in red on my Workspace, but I can't figure out why.

@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/fonts/DroidSerif-Bold-webfont.tff') format('truetype'),
      url('fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg');

  font-weight: bold;
  font-style: normal;
}

Is it not the same as what's in the video?

5 Answers

Kate Hoferkamp
Kate Hoferkamp
5,205 Points
Kate Hoferkamp
Kate Hoferkamp
5,205 Points

Did you add the link to the font in your html? It would look something like this:

<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
Krista Gomke
Krista Gomke
4,426 Points
Krista Gomke
Krista Gomke
4,426 Points

That wasn't in the video I was following along with. We did that when we used a Google font, but this font set was downloaded and put into a fonts folder right in the workspace... so it shouldn't need that href, should it?

Kate Hoferkamp
Kate Hoferkamp
5,205 Points
Kate Hoferkamp
Kate Hoferkamp
5,205 Points

Ah okay, I skimmed through the video and just saw the google thing in the beginning. Give me a second to look again at your code.

You have a ':' in your @font-face {.

Krista Gomke
Krista Gomke
4,426 Points
Krista Gomke
Krista Gomke
4,426 Points

Ahaha... I knew it had to be something stupid. Thank you so much!

Krista Gomke
Krista Gomke
4,426 Points
Krista Gomke
Krista Gomke
4,426 Points

Any idea though why, in my Workspace anyway, the src part of my @font-face syntax is highlighted in red? Like, not red font, but the "you've done something wrong" red (even though it does still work and does produce the expected result and is the same as in the video)...?

Kate Hoferkamp
Kate Hoferkamp
5,205 Points
Kate Hoferkamp
Kate Hoferkamp
5,205 Points

Are you sure the relative paths are correct and in the "fonts" folder? Also, is your css file in a css folder? If so, you have to back out of that folder ('../') before you go into the fonts folder.

That's odd that it is working correctly, but showing up red... hmm.