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

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.

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;

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;

ol {
  margin: 30px 0;

li {
  margin-bottom: 10px;

5 Answers

Glenn Jacobs
Glenn Jacobs
1,900 Points


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


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

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

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

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.

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.

interesting thought...

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

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.

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