FAQ: CSS Typography - Linking Fonts II

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” ?

2 Likes

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.

1 Like

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?

5 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

3 Likes

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

40 Likes

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

6 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

4 Likes

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.

1 Like

Can confirm it is still broken, but thanks @porterbytes for link explaining what this seemingly extraneous piece of info does!