FAQ: Typography - Web Fonts Using @font-face

Frequently Asked Questions Uncategorized
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

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 Language Help.

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

Need broader help or resources? Head to Language Help and Tips and Resources. If you are wanting feedback or inspiration for a project, check out Projects.

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 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!

2

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 ?

Capture d’écran 2021-05-23 à 11.02.05
Capture d’écran 2021-05-23 à 11.02.051920×1080 383 KB

3

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…

4

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:

5

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 !

11 Likes
6

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?

7

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

1 Like
8

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.

9

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

10

Resetting the workspace did the job for me.

1 Like
11

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')
}
12

use ‘GET UNSTUCK’ menu at top right, and choose ‘SOLUTION’-> ‘Get Code Solution’. You will find the answer.

Screenshot_20211022-073548
Screenshot_20211022-0735481920×1200 230 KB

5 Likes
13

The bug is still there. Now there is solution code being offered that can be copied and pasted or clicked to replace the non-working code directly.

I couldn’t find any deviation in my work from what should be working anyhow and is also visible from the solution code, so still a somewhat confusing result here.

14

i tried your solution and it worked! thanks;-)

15

Same here in 2022! I followed the syntax in the lesson example and it still didn’t work. Removing the semicolon, adding it in or replacing with a comma didn’t fix it. The only thing that did was updating my code to the solution code :frowning:

16

Anyone here in 2022 and struggling? :sweat_smile: I think I figured it out!

This question would not let me pass step 2 until I formated the URLs in the same order as the question:

2.
Within the @font-face rule, add a src property with the following paths and formats as values:

  • url('../fonts/Glegoo-Regular.woff2') and a format of 'woff2'
  • url('../fonts/Glegoo-Regular.woff') and a format of 'woff'
  • url('../fonts/Glegoo-Regular.ttf') and a format of 'truetype'

Correct Answer

@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');
}

Incorrect Answer(???)

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

It’s literally the exact same thing, just a different order- semicolon and all. :woman_facepalming:t5: Maybe it’s possible that there’s an unwritten hierarchy rule for these file extensions, or it could just be a little bug- either way, I hope this saves someone from pulling their hair out! Happy Coding!!

2 Likes
17

Still the same bug. Non of your solutions worked for me. Get Unstuck and Change My Code worked.

1 Like
18

Is anyone having an issue in 9/10? It seems like the code editor won’t load.

19

your code worked well, thanks :+1:

1 Like
20

How do we determine whether is better for a website to use @font-face and when to link a web font?

1 Like