FAQ: Typography - Web Fonts Using <link>

Frequently Asked Questions CSS FAQ
1

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

This community-built FAQ covers the “Web Fonts Using ” 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

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

on the web fonts section the training requires me to put the font-family: ‘mono space’, spacemono;
on the .space selector, but going through the HTML I cannot find any classes with class=“space” yet the font changes to mono space. Am I missing something here or what is going on? this part has me confused!

1 Like
3

Hey I think it’s this one. It’s in line 98 of index.html: class=‘font-card space’. The .space part refers to the ‘space’ found in class=‘font-card space’. The ‘font-card’ bit of the HTML code does not need to be referred to in the CSS .space because it’s already been specified in the beginning of the CSS (line 91) and that will apply to all HTML classes with ‘font-space’ in them regardless of what other class is added to it in index.html. The reason ‘space’ has been added to the HTML class=‘font-card’ is to add another layer of specificity.

So basically, CSS .font-card targets all HTML class=‘font-card’. CSS .space targets specifically the class= ‘space’ in HTML class=‘font-card space’. This means that both the CSS .font-card and the CSS .space are targeting the HTML class=‘font-card space’. The reason why it isn’t HTML class=‘space’ only is because the author wanted the CSS .font-card to apply to it too.
This is the HTML code class=‘font-card space’ which you’re looking for

<!- - Font Card - Monospaced - → 

< div class='font-card space' >

  < h2>Space Mono< /h2 >

This is the CSS .font-card which will apply to the HTML code (class=‘font-card space’) above

/* Font Card Sections */

.font-card {

padding: 10px 0 40px 0;

background-color: #ffffff;

text-align: center;

}

And this is the .space which will also apply to the HTML class=‘font-card space’ above

.space {

font-family: ‘Space Mono’, monospace;

}

4

In the style.css of this exercise, “.font-card” and “.font-card .creator” are separated. (Line 90)
Why can’t the latter just be “.creator”? Why is the repetition of ".font-card"necessary?

6

I just come across this exercise and kept getting an error when entering the CSS font-family ruleset, I then realised that it want me to enter the font family with single quotes and not double, I thought they were interchangeable, it start getting confusing because on some exercise it let me use double quotes, and sometimes not, or am I missing something?

2 Likes
7

Hello!

In the vast majority of cases yes, ' and " are completely interchangeable, that said, on some exercises, Codecademy’s marking can be extremely fussy and, even something like using a different type of quotes than is expecting will cause it to fail, even if there’s no technical difference.

Happy coding!

3 Likes
8

Thanks, at least I know it’s not me doing something wrong.

1 Like
10

trying to link to google space mono and even though i have the link tag for the 400 regular space mono, it wont let me proceed.

1 Like
11

When there are multiple <link> elements generated, which one do you use in your HTML?

12

Can you please elaborate on what you mean?

13

On the google fonts page, once you select a font, and it generates some links on the right hand side like so:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap" rel="stylesheet">
1 Like
14

I followed the instructions to a T, and it still didn’t render the text Space Mono. Anyone else have this experience?

1 Like
15

To anyone currently trying to figure this out - double and triple-check you have selected the correct font (Space Mono) correct weight (400) and correct style (normal).

I had italic selected for ages without realising. :man_facepalming:

16

Wait, do I need to provide a separate link for each font variation: normal, cursive, and bold?

Also, why does Google Fonts provide three link elements instead of just one?

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
1 Like
17

Same!! I have no idea how to fix this issue

18

probably the link changed and the parser does not accept the new link…

codecademy has a flaw that you cannot skip anything now I am stuck in my full course

20

to everyone… i found the problem
feel free to copy paste my code…

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">```
21

Could you please elaborate on how you found this correction? Over a month later and codecademy still showing an error when I copy/paste the code from google.

22

I tried finding the selected Google font ‘Space Mono’ , found it on Google Fonts but when I tried to copy the long link into the folder it just wasn’t working. I’m not sure why it didn’t work. I followed the steps and copied the link of the regular 400 Space Mono and pasted it into the head of the HTML ,still nothing. I decided not to copy it directly from the website and resorted to using the link in the hint which worked. Is the link outdated in the exercise or am I just doing it wrong?

23

I copied the link from google fonts and it’s still working, at first mine didn’t work too cause’ i pasted on style.css not index.html folder😢