CSS Enhancing Design with CSS Styling Text Importing Fonts

Roberto Ty
Roberto Ty
6,007 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?

3 Answers

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,608 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.

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!

Roberto Ty
Roberto Ty
6,007 Points

Thanks. I figured it out.