FAQ: Typography - Web Fonts Using @font-face

This community-built FAQ covers the “Web Fonts Using @font-face” exercise from the lesson “Typography”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Build a Website with HTML, CSS, and Github Pages
Full-Stack Engineer
Front-End Engineer

Learn CSS

FAQs on the exercise Web Fonts Using @font-face

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Hi everyone,

I’m having trouble with this exercise. I can’t get past step 2 …
I’ve deleted my code and re-written it, tried copy pasting the example, then the right urls inside.
Nothing has worked.

I’m pretty sure that my code is ok as it works great in the preview tab.

Any help ?

Your code looks fine to me as well. Sometimes the test behaves a little moody. A deviant order or space sometimes prevents progress.
Did you add the comment at the first line? Maybe just try again without that comment…

Thanks for your answer @mirja_t !
Yes the comment was mine. I’ve just tried removing it and it did not solve the problem.
I even tried reseting the exercise. I also tried typing the code without the line breaks after each url.
I’m running out of ideas :sweat_smile:

Problem solved by removing the semicolon at the end of the src property in @font-face

@font-face {
  font-family: 'GlegooBanner';
  src: url('../fonts/Glegoo-Regular.woff2') format('woff2'), 
  url('../fonts/Glegoo-Regular.woff') format('woff'), 
  url('../fonts/Glegoo-Regular.ttf') format('truetype') //no semicolon here
}

I’ve reported it as a bug and I guess that conversation can be deleted by a mod once the bug is fixed.

Thanks for your help and time !

5 Likes

I am having the same issue. I even copied and pasted your code above but it still won’t let me through. Any other suggestions?

Hi ! Are you blocked at step 2 as well, with the same error message ?
Maybe they fixed the bug, have you tried with the semicolon at the end ?
Looks like the test parses our answer so make sure you use single and not double quotes as this may result in the test failing as well

I had similar issue with step 2. The solution code given is incorrect according to the exercise example and mdn css examples. The semicolon at the end of the URL FORMAT for my src section needed to not exist for the test to work on my exercise. The examples show the semicolon should be there but the test doesn’t like it. Removing it like stated above helped get past that for me.

Yes, I kept rewriting the code. I thought I was doing something wrong! The solution was mistyped. There should be a semicolon after the last [format]. :slight_smile:
Codecademy Typography @font-face

Resetting the workspace did the job for me.

Removing the semicolon worked for me.

@font-face {
  font-family: 'GlegooBanner';
  src: url('../fonts/Glegoo-Regular.woff2') format('woff2'),
       url('../fonts/Glegoo-Regular.woff') format('woff'),
       url('../fonts/Glegoo-Regular.ttf') format('truetype')
}