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 Basics (2014) Enhancing the Design With CSS Web Fonts with @font-face

Emilio Magris
Emilio Magris
3,110 Points
Posted by Emilio Magris
Emilio Magris
3,110 Points

Font not changing

Hi there I cant get the browser to update to the abolition regular font. I checked the spelling of the code to be exactly like Guils code and it is. I also tried to change it to see if it would work but nothing happened.

I noticed that the src are highlighted in red, not sure if that may be the error? Even deleting one src and separate with a coma the 4 url the remaining src is still highlighted.

Thanks a lot for your help.

3 Answers

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

You're using backticks (`) around your chosen font name in both the @font-face and the h1, h2 selector. Change these to either single or double quotes and you should see the changed font. The video you're referring to is using single quotes.

Emilio Magris
Emilio Magris
3,110 Points
Emilio Magris
Emilio Magris
3,110 Points

Thank you Joel, you got it right and it works fine now!

Podrig Leoghain
Podrig Leoghain
5,094 Points
Podrig Leoghain
Podrig Leoghain
5,094 Points

Post your code using the 'Markdown Cheatsheet' please.

Emilio Magris
Emilio Magris
3,110 Points
Emilio Magris
Emilio Magris
3,110 Points

Hi Podrig This is the original code from the video.

/* Web Fonts -------------------- */

@font-face {
  font-family: `Abolition Regular`;
  src: url('../fonts/abolition-regular-webfont.eot');
  src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/abolition-regular-webfont.woff') format('woff'),
       url('../fonts/abolition-regular-webfont.ttf') format('truetype');
}  

/* Base Styles -------------------- */

* {
  box-sizing: border-box;
}

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

h1,
h2 {
  font-family: `Abolition Regular`, Helvetica, Arial, sans-serif;
}