FAQ: CSS Typography - Linking Fonts II

This community-built FAQ covers the “Linking Fonts II” exercise from the lesson “CSS Typography”.

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

Web Development

Learn CSS

FAQs on the exercise Linking Fonts II

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!

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

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

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!

Why is “type” with type=“text/css” not necessary in linking fonts?

4 Likes

Why do we need 2 link rel=“stylesheet” type=“text/css” href=“styles/style.css” ?

1 Like

I wasn’t sure where the link came from? i did copy the video but it didn’t give me a link, i could only download the font.

When you see the fonts listed, click the (+) button on the top right of the font you want. A pop-up appears in the bottom of your screen that says “1 family selected”. Under the “EMBED” section you can choose the link that is “Standard” or you can choose an “@IMPORT” link. This description follows the latest chrome browser. Using a different browser may be slightly different. Try using chrome if you are having troubles with following these instructions (Chrome is designed by google so fonts.google should work easily).

1 Like

@arrayrockstar70655

I also wasn’t sure about this, and in the examples given in this exercise, the first two include the type="text/css" attribute, whereas the third one doesn’t. So, I decided to investigate…

According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link, when the linked document is a stylesheet (i.e. rel="stylesheet"), the type attribute can be omitted (and this is recommended), because apparently CSS is the only type of stylesheet language available on the web anyway.

This seems to imply that we can omit type="text/css" whenever we link to a stylesheet, not just when linking externally to fonts.

Could someone with more experience confirm this?

3 Likes

I remember seeing the answer to this in an earlier exercise’s forum discussion - I found it. The answer is that the type attribute can be omitted since html5.

Link to the post:
https://discuss.codecademy.com/t/faq-learn-css-selectors-visual-rules-css-setup-selectors-linking-the-css-file/267369/15?u=agentgenx

2 Likes

Please update the exercise. Step one doesn’t accept the link from fonts.google which now is: ("&display=swap" has been added)

23 Likes

I agree with Natalie. The link for the google font is now different.

4 Likes

Definitely needs updating.

1 Like

Agreed! Had me confused.

1 Like

where does the .space .sample . text tag come from??

I third this. Has Codecademy abandoned these lessons?

Those are CSS classes; they are defined in the HTML.

The link I used which was provided from the website: ( fonts.google.com ) did not work.
This was my link:

I checked the hint (which gave a link): <link href="https://fonts.googleapis.com/css?family=Space+Mono:400,700 rel=“stylesheet”>

The difference:
“&display=swap”

is the only exclusion, is this a bug? Maybe the link changed?

1 Like

Agree. The answer to this exercise seems to be out of date. And since it relies on an outside website as a source, the directions will give you an incorrect answer.

Correct, there is an issue with the current lesson, concerning “&display=swap”

This is a fantastic feature that we should all be excited for, but the lesson definitely needs to be updated to accept multiple responses, and potentially even add a quick lesson teaching what exactly display=swap does.

Read more about display=swap

1 Like

bump on that update.

Still broken because of “&display=swap”
Report sent via Get Help > Bugs form, I encourage everyone to do the same (since these forums don’t seem to be monitored by Codecademy devs).

Still broken. BUT, I tried taking out &display=swap, then ran it again. It works! This may not be the perfect solution, but it might get you past this step.