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

Posted by Jamison Imhoff
Jamison Imhoff
12,460 Points

Font Type in Chrome

Just wondering if the "Abolition Regular" Font should be working in google chrome after this video. I placed the code and followed along with the video, but when I preview the page, it still shows helvetica font.

Chrom is up to date btw.

Jamison Imhoff
Jamison Imhoff
12,460 Points

Code: I just attached the first section that deals with the fonts.

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

@fontface {
  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;
}

h1 {  
  font-size: 5.625rem; /* 90px/16px  */
  color: rgba(255, 255, 255, 1);
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.3;
  text-shadow: 0 1px 1px rgba(0, 0, 0,.8);
  margin: 12px 0 0;
}

h2 {
  font-size: 3.3125em; /* 53px/16px  */
  font-weight: normal;
  line-height: 1.1;
  margin: 0 0 .5em; /* 0 0 26px */
}

h3 {
  font-size: 1.25em; /* 20px/16px  */
  color: #48525c;
  line-height: 1.2;
  margin-bottom: 1.7em; /* 34px */
}

img {
  max-width: 100%;
  margin-bottom: 20px;
  border-radius: 10px;
}

ul,
ol {
  margin: 30px 0;
}

li {
  margin-bottom: 10px;
}

5 Answers

Glenn Jacobs
Glenn Jacobs
1,900 Points
Glenn Jacobs
Glenn Jacobs
1,900 Points

Jamison,

You made the same mistake I did. The code should read "@font-face". We left out the hyphen between font and face.

Andreas Anastasiades
Andreas Anastasiades
2,916 Points
Andreas Anastasiades
Andreas Anastasiades
2,916 Points

Jamison,

Take Glenn's advice. It should be @font-face That should fix your problem

Jamison Imhoff
Jamison Imhoff
12,460 Points

that did it! sometimes the answer is so obvious! xD

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

Glenn is right! just checked on MDN. totally missed that. Good catch.

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

If you downloaded the font from Google Fonts, it should work in chrome. Can you paste your CSS into the question so we can take a look at it. Maybe its just a simple error. thanks.

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

The only thing I can see that might be an issue is that your using font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; in your body tag, and there might be a inheriting issue with your H1 tags. Just a thought.

Jamison Imhoff
Jamison Imhoff
12,460 Points

interesting thought...

i messed with it a bit, but still no difference =/

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

The only other thing I can think of is that there might be an issue with the url's. If there is no issue with the body style. I can't see anything else that is wrong. Sorry wish I could help.

Jamison Imhoff
Jamison Imhoff
12,460 Points

it may just be an issue on my end. no worries! Thanks.