FAQ: CSS Typography - Linking Fonts II

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

This is the link I got from google fonts.

The exercise says this was wrong. Then I clicked the hint button. And it gave me a similar link without the “&display=swap”. So I had delete the “&display=swap” in order for it to say that it was correct.

I just read above. This issue has existed since May 2019 at the earliest. It is now November 2019. This issue has not been fixed.

Also, in the previous exercise. In the video you search for droid serif, that costs $99 now from fonts.com. Cant get it for free anymore.

Hi. I was stuck on this lesson for a few minutes till i clicked the hint and realised the link copied from google fonts wasnt the same that was used in the lesson because of the “&display=swap”.

I also noticed most people having this same issue. Can an experienced user please elaborate on the “&display=swap” Thanks

This article might explain this in better detail.

Basically, the deal is that Google decided to add a default &display=swap to all the google fonts. Unfortunately, this exercise was created before this change was made, which is why you got an error when you just copied over the link, @mnkori

I would recommend reporting it as a bug for anyone else dealing with this, and just deleting that last part of the link while you’re waiting for it to be fixed.

1 Like

Came here to find this. Agree 100%

I’ve encountered this issue as others have and reported it. Thank you for helping others with it.

1 Like

It is still not updated!

1 Like

What is a fallback font?

1 Like

Hey @muslehuddinrobin0410!

A fallback font is a font that is used instead of the preferred one in case the preferred one is unavailable.

Here’s an example:

p {
  font-family:'Fancy Gothic', cursive;
}

Here the fallback font is cursive and would be used if the user doesn’t have the font “Fancy Gothic” installed on their computer, or if the link for “Fancy Gothic” is broken.

Why is the link to the font included with the html, and not the CSS?

Hi @adamshenton636275036 :slight_smile:

The head section contains all the metadata necessary to the webpage, therefore that’s where we would link our fonts.

Think of the head section as the brain where all the informations are stored.
Since the informations inside the head are the first to be read, that’s where we would keep the details regarding the fonts so that the browser knows what to expect and promptly renders the way it has to be.

Don’t get confused by the fact that fonts are related to the style of a webpage. When linking our chosen fonts in the head section of html, we’re basically creating the path to retrieve these fonts.
Without that path, styling wouldn’t be possible because no fonts would be available (except for the default fonts).

2 Likes

I am having trouble with the links as well. It would appear that i am getting an addition to the link i try to pull from google. In the examples below, the first one is the one that is accepted by codeacademy. The later is the one i got from google fonts. I have recreated the later example in chrome, brave and firefox. What is with the “display=swap”?

The link for href in the “solution” was different than what was on Google Fonts and the lesson examples above… I’m curious as to why? Perhaps because I’m using a PC and the lesson was done on a Mac?

Still not updated…

GRRRR!