I am having a fair bit of difficulty trying on Activity No. 7 Typography - Aoife Conleavy project - css @font-face.
https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/intermediate-css-colors-and-typography/modules/learn-css-typography/projects/typography-ii
I am trying to insert the links for the activity mentioned above. There are three font types mentioned - Abril-fatcace, Merriweather and Work Sans.
I have view the associated video Project Walkthrough.
At around 6:30 Matt speaks about an alternate way of inserting google fonts other than links into the using the google fonts link generator i.e @font-face
The google web page he shows differs significantly in the presented page on the video. Thats Ok, I have managed to sort that out and generated the links. He then goes on to say, copy and paste the Url in google fonts and paste with out demonstration and then select the fonts required.
What url does he copy? AND where does he paste it to. AND does every font-family require a seperate @font-face.
I find this process not particularly well addressed especially now we are using Multiple font-family and within family styles and there also differences in the siytax demonstrated in the module and the google fonts links.
hope someone can assist - really enjoying the course so far.
Tyrone.
When you ask a question, donât forget to include a link to the exercise or project youâre dealing with!
If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way youâll be helping everyone â helping people to answer your question and helping others who are stuck to find the question and answer! 
Hi there,
Have you figured the process yet?
Step 4 is asking you to use the fonts provided by fonts.google to inject the fonts into the project.
If you have all of the selected fonts, it should look like this:
What you will need to decide is how you will implement the fonts. You can do this through your HTML or your CSS file. If yo want to place it in your HTML, you will need to copy the <link>'s
and place them in the <head> of your file which will ultimately look something like this:
<head>
<title>Morocco</title>
<link rel="stylesheet" type="text/css" href="styles/reset.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<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=Abril+Fatface&family=Merriweather:[email protected];1&family=Work+Sans:[email protected];500;800&display=swap" rel="stylesheet">
</head>
If you want to place them in your CSS file, then you will need to copy this:
Inside your CSS file, it will appear like so:
//Without the <style> That is only if you have the stylesheet within your HTML file
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:[email protected];1&family=Work+Sans:[email protected];500;800&display=swap');
Notice that each font is included in the same <link> and @import urlâbut you can make them separate.
Then you will use the fonts as usual:
I hope this helps!
1 Like
What @kirativewd said is perfect and correct, but I think I can explain it in another way that might make sense.
I am at work in the middle of a class so I apologize in advance if the formatting isnât great.
I was also stuck on the same part for about 15 minutes and finally realized where the @font-face parts are coming from. As @kirativewd said, you get the fonts from fonts.google in Step 4 and place them in theindex.html HTML file. However, Step 7 wants you to use the @font-face. I found these by going to the link found in the href that is automatically created for you on fonts.google:
https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:[email protected];1&family=Work+Sans:[email protected];500;800&display=swap
Then, as the hint in Step 7 suggests, copy the @font-face parts under the /* latin */ .
As to your question if âevery font-family requires a seperate @font-face,â I think each one does. The hint in Step 7 says " Copy and paste the @font-face rule from the
/* latin */
sections of the rule set at the href of the font from Google. For instance, the href for âRobotoâ returns a series of @font-face rules. Include the latin section for each font and font-weight that you need."
So I am assuming you do a new @font-face rule for each font and font-weight. Or at least, I did and everything turned out okay.
To summarize, what @kirativewd posted is honestly infinitely easier and probably better/easier to read, however going strictly on what codecademy has asked, I think this way makes sense!
