Stuck on Typography Morocco Project

Hey guys,

I’m currently doing the Morocco typography project. I’m stuck on question 7, it asks;

"Instead of linking the font from index.html, you realize it would be a better to import Google fonts in the files directly into stylesheets with the @font-face property.

Use the @font-face property to import the fonts directly to the stylesheets, and remove the tags that reference the Google fonts from the index.html page."

It seems simple enough :sweat_smile: So I go to google fonts and copy directly the font-face rules, add them to my CSS and delete the HTML links.

The only problem is the fonts don’t show up on my page. The walk through video for the project shows the instructor copying the code directly from a browser that also includes Unicode-range.

The “Hint” for question 7 says,
“Copy and paste the @font-face rule from the
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”.

Then it shows a picture of this,

I tried doing this the for the fonts I need, being Abril Fatface, Work Sans and Merriweather, but have no luck finding the fonts in the browser like this with the Latin section.

I’m sure I am missing something quite easy :laughing:

Any suggestions would be much appreciated.


This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.