CSS Typography practice @font-face property - formatting struggles

— Morocco Website Practice project, CSS Typography lesson. —

While attempting to use web fonts using @font-face in my css stylesheet, I am encountering several issues that is making it difficult to know what is going wrong.

Here is a link to my code thus far.

Please note that I am trying a few methods for the @font-face within the stylesheet based on the solution video provided: CSS Project Typography - YouTube

  1. The Google Fonts website does not provide the ability to cut and paste the @font-face as shown in the video.
    Google Fonts

  2. To get to information that resembles what the web developer in the video uses for this step, I did find it on Google Webfonts helper: google webfonts helper
    (But not all of the fonts for this practice are on the helper website).

  3. For some reason I cannot paste code into the CodeCademy platform, so I have to type it all out. This makes trying the method of copying the CSS from the google-webfonts-helper site into the practice CSS file extremely labor-intensive. I attempted this with Abril Fatface font only as you can see in my CSS file).

  1. I also tried the method of downloading the font to my computer from Google Fonts, then uploading it to the CodeCademy practice project. This did place the files into the file structure, but only to the location outside of the Fonts file where they should go.

Screen Shot 2022-04-15 at 12.54.35 PM

So, to then write the CSS for the uploaded font files with the @font-face property ended up looking like this:
(But doesn’t appear correct, as the fonts on the website are not displaying correctly)

  1. I am not certain, but wondering if the issue of cut & paste, and other poor user experience on the CodeCademy site (uploading files where I want them to go) is because I am using an iMac and Safari. – ? Any ideas?

Using the LINK method for fonts in the html file worked fine (other than I couldn’t cut and paste in the font info).
I just cannot seem to get the @font-face format figured out.

Any help is appreciated.

Hi! I was stuck here too!

I got these from the Google Fonts site: https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:ital@0;1&family=Work+Sans:wght@400;500;800&display=swap

Literally look for the /* latin */ alternatives to the fonts you require, then copy paste them onto your project.

For example, paste the code below onto your CSS style sheet, and it should do the trick for the “Abril Fatface” font-family. You need all of the supplied code, it won’t work just with the font-family, and url, that’s where I got stuck.

@font-face {
font-family: ‘Abril Fatface’;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/abrilfatface/v18/zOL64pLDlL1D99S8g8PtiKchq-dmjQ.woff2) format(‘woff2’);
}

Try it, and feel free to reach out if you need help!

Cheers,
Claudette