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

Posted by B.B. Groeneveld
B.B. Groeneveld
2,826 Points

Can anyone help me to fix the right syntax to display an imported webfont?

Hi everyone,

I have a problem with an imported webfont. I would like to change my helvetica h1 to an imported webfont, but it's not working.

I downloaded my font from https://www.fontsquirrel.com. It appeared it is an .ttf file. I have uploaded it into my workspace and made a folder to put in the file for a directory. Now it's time to put the syntax in my .css:

/*-- Web Fonts --*/

@font-face {
  font-family: "courier prime";
  src: url('../webfonts/courier-prime.ttf');
  src: url('../webfonts/courier-prime.ttf') format('truetype');
}

/* -- BASE STYLES -- */

body {
  color: #293033;
  margin: 0;
  font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
  font-family: "courier-prime", Helvetica, Arial, sans-serif;
  font-size: 5.625rem; /* 90px/16px */
  color: red;
  text-transform: uppercase;
  text-shadow: 0px 2px 0 lightslategrey;
  font-weight: normal;
  line-height: .8;
  text-decoration-line: none;
  padding-top: 40px;
  margin-bottom: 5px;
  margin-top: 12px;
}

my .html:

<h1 class="title">Vissidarte</h1>

I've searched over an 1/2h to find a bug, but can't see it. Anyone has a solution? Much appreciated!

Best Regards, Brett

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Try selecting the class in your CSS with h1.title and in your body, either remove that line and replace the property with font-family. The class selector should then override the body selector as it has higher specificity i.e. it's more specific than selecting the whole body! :-)

B.B. Groeneveld
B.B. Groeneveld
2,826 Points

Hi Jonathan,

Thanks for helping me. I have done what you said: replaced the h1 into .title and removed the font line in my body target, and replaced it with font-family, though nothing happened. I suppose there is something wrong with the imported webfont, it can't find it. I have double checked the names etc., but everything seems allright there.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hmm... I'm not seeing any results for courier-prime on the Font Squirrel Site at the moment...

But if you have it downloaded then the next thing to check is if you have correctly linked to the @font-face rule in your code. I can't see from the HTML you've provided that you've done that but it'll be in one of the CSS files you link to in the HTML

In fact.... I think I've noticed the problem. Your reference to the courier-prime font is different to the one in the @font-face rule. Try changing these so that they match. I can't see from Font Squirrel which is the exact name to use but "courier-prime" or "courier prime" should do the trick.

Phew! :)

B.B. Groeneveld
B.B. Groeneveld
2,826 Points
B.B. Groeneveld
B.B. Groeneveld
2,826 Points

Yes, yes, yes! It does work! I have changed the name in the @font-face rule to "courier prime" in stead of "courier-prime". I thought the name should match the file name, but apparantly the "-" should be a space. I'm so happy, thanks a lot.