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 Enhancing Design with CSS Styling Text Importing Fonts

Roberto Ty
Roberto Ty
7,607 Points
Posted by Roberto Ty
Roberto Ty
7,607 Points

The @font-face does not import Abolition Regular. In my Preview it defaults to a sans-serif.

I followed the video style sheet and double-checked if I had any typos, but I cannot find any errors. It still doesn't display the Abolition Regular font.

Also, there are file downloads for me to check against. The downloads tab only has video links?

4 Answers

Peter Vann
Peter Vann
36,427 Points

Here is my css code:

/* Web Fonts ----------------------- */
@font-face {
  font-family: 'Abolition Regular';
  src: url('../fonts/abolition-regular-webfont.woff') format('woff');
}


/* Base Styles --------------------- */
* {
  box-sizing: border-box;
}
html {
  font-size: 20px;
}
body {
  font-family: Verdana, Geneva, sans-serif;
}
h1,
h2 {
  font-family: 'Abolition Regular', Impact, Charcoal, sans-serif;
}
img {
  width: 100%; /* responsive images */
}

which appears to works as intended (just fine).

Perhaps try this:

Cut and paste my CSS code on one side and your CSS code on the other here:

https://text-compare.com/

And then you can easily spot any differences/discrepancies.

I hope that helps.

Stay safe and happy coding!

Candace Harris
Candace Harris
1,609 Points

I was having the same issue. When I compared our code I noticed I had a space between "format" and "('woff'). Crazy how one small thing can make the font not work! Thanks for the answer.

Tramel Johnson
Tramel Johnson
4,399 Points
Tramel Johnson
Tramel Johnson
4,399 Points

Had the same problem and I just forgot to put a comma between the h1 and h2 selectors.

Peter Vann
Peter Vann
36,427 Points
Peter Vann
Peter Vann
36,427 Points

Yea, I had another student whose CSS wasn't passing because there were spaces between the property and the colon.

Like this:

h1 {
  color : tomato;
  background-color : aqua; /*** Not the best color combo, though!?! LOL ***/
}

(And often semicolons* are my nemesis!?! LOL)

*(And/or missing curly braces/parentheses!?! Ugh!?! LOL)

I hope that helps.

Stay safe and happy coding!

Tara Abadi
.a{fill-rule:evenodd;}techdegree
Tara Abadi
Front End Web Development Techdegree Student 2,097 Points

so helpful! Thank you!

Roberto Ty
Roberto Ty
7,607 Points
Roberto Ty
Roberto Ty
7,607 Points

Thanks. I figured it out.