The @font-face struggle. Using a method I wasn't teached

Well, this is not a question, but something I discovered myself.
CodeCademy is an awesome website, I’m not gonna lie. I had tried to learn Java, .xml to make apps, and I always struggled because I haven’t found a good system yet… But CodeCademy changed it for good.

Hooweeeever… There are some flaws. Well, only one flaw (forget the word ‘some’). The only way I could finish the Basic CSS last-project course about Typography, using JUST the @font-face method, was submitting the fonts to the Files folder, at the Top of the left. I repeat, using @font-face and not the method of adding typography styles to the head stylesheet.

I don’t know what magic did the experienced developer from the Get Unstuck section to copy from Google APIs, or what… But he did something I / we weren’t teached before… This got me a little exhausted… But the conclusion I’ve taken is that I would rather upload the fonts I would like to some folder, whenever I use Wordpress, and just use the @font-face src method field addresing just those. And nothing more.

If you could do it the same way as the experienced developer, just show me. I will try it.

That was all. Greetings

2 Likes

The method of copying google fonts is shown in the earlier lesson in the typography section. here

You simply go to the google fonts page (the link is in the project) and then search for the font you want. When you select it, it will give you a set of links on the right of the page which you simply copy and paste into your html page. Then you should have access to the fonts.

I also found Task 7 on the Typography project difficult and couldn’t remember learning this in any of the lessons prior.

In Task 4, I selected all of the required styles (Abril Fatface Regular 400, Work Sans Regular 400, Work Sans Medium 500, Work Sans Extra-bold 800, Merriweather Regular 400 and Merriweather Regular 400 italic) on the Google Fonts API. I opened my selected families and with the <link> option selected it generated the following code:

<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:ital@0;1&family=Work+Sans:wght@400;500;800&display=swap" rel="stylesheet">

After reviewing the Project Walkthrough under Get Unstuck I realised that the appropriate @font-face declarations can be found by visiting the URL in the href value from Task 4 (https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:ital@0;1&family=Work+Sans:wght@400;500;800&display=swap"). Here you can find each of the /* latin */ declarations for each of the font families.

I entered six declarations in my style.css file for each of the six font families.

font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/abrilfatface/v12/zOL64pLDlL1D99S8g8PtiKchq-dmjQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v11/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v11/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v11/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/merriweather/v25/u-4m0qyriQwlOrhSvowK_l5-eRZOf-I.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/merriweather/v25/u-440qyriQwlOrhSvowK_l5-fCZM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

However, my question is whether I need to provide a declaration for each of the six font families or whether these can be condensed as alluded to in the Project Walkthrough? For example, can the multiple weights of Work Sans be merged together? What about the multiple styles of Merriweather? I notice that the source of each is different which is making me think I can’t, but wasn’t sure as this is how it seem that the Project Walkthrough completed the task.

6 Likes

Thanks for replying my doubt to both josh.edwards and design1732688915. This problem wasn’t a big deal. It got me stuck for 30min ~1 hour, and I could solve it manually, adding the two fonts to the folder that appears above at the left on the CodeCademy tutorials.
But I will take it into account if I ever struggle to have any CSS typography problems in the future.
Greetings!

copy and paste the stylesheet link on a WEB BROWSER and it will show you the the fatace its like inspecting or opnening the link

I had a similar issue to this exercise. I would copy and paste the latin versions of the declarations from the stylesheet after clicking the link I received from google fonts and once pasted in my own stylesheet for the exercise, the url would gray out past ‘https’. It was very confusing and did not look anything like how the instructors looked when it was all said and done. I was able to continue on, however, I felt like I hadn’t completed the task given that every @font-face declaration had a grayed out link that made things seem obsolete.

1 Like