I need some explanation about type face in typography

[denzelsugayan6884482]

Hi everyone,

I’m currently learning typography in CSS which I’m stuck in this current topic adding type face using latin in the project provided. I got confused with the lack of explanation according to the lessons provided (still searching for outside sources) but none of them really helped. I guess with the different software languages their using and Codecademy has adds more frustration.

In this screenshot, problem 7, they asked me add the /latin/ type face and ‘remove’ the font style collected from Google fonts. Now I don’t know what to expect to happen at this point that I just copied and paste the provided syntax to the given site. If anyone knows how to explain this, I would be gladly thankful.

[mirja_t]

Hi @denzelsugayan6884482
I don’t know what you were supposed to do during the course, did you add a link to the head of your html document before this step?
With @font-face instead of a link in your html you can link to a local copy of the font rather than being dependant on a remote source which could be offline. You also don’t need to add a cookie hint on your website if you load your fonts from a local folder. That’s the main difference.
Do you have a specific question about a certain attribute?

[denzelsugayan6884482]

I don’t think they want me to anything from html, rather than in CSS. The problem is, I did link it to CSS like Codecademy showed, I even downloaded a free Roboto font in Material Design Lite to see if it works. I even followed the file path correctly and I looked if the font face I used is compatible with Safari and Google Chrome but still it doesn’t work. I don’t know anything about cookies yet, I’m still struggling figuring this font face out.

[mirja_t]

Ok, you said you pasted the codecademy solution into your style.css, so that probably works. I don’t know what is meant by

@denzelsugayan6884482

‘remove’ the font style collected from Google fonts

because I don’t know where the exercise startet from.
So I make a guess what might be the problem here:
The @font-face just provides the information about your available fonts. You still have to apply them to your elements like so:

html{
  font-family: 'Roboto', sans-serif;
}

In case there is a typo in your css which I can’t check, because it’s a screenshot, you find the @font-face info for Roboto here:
https://fonts.googleapis.com/css2?family=Roboto&display=swap
For latin, you could copy the last snippet from
/* latin */

[denzelsugayan6884482]

so the lesson stated there’s 2 ways we can import fonts. Here’s the following:

1. Codecademy suggests going to Google Fonts >Google fonts and select which font face we like to use and simply link it to the index.html section.
2. The second method requires only CSS to be modified using the src=url() attribute. Which makes sense to delete the one’s imported from Google fonts shown. And I’m not really sure if the syntax was used in Codecademy’s 3 way platform works on Sublime.

Conclusion: I guess my issue is how do I know when the font face used in the exercise worked, and whether the syntax I inputed actually did something. I apologize if I’m causing some sort of confusion, but to give you an illustration, I’ll screenshot my own version of my coding thru Sublime.

P.S. This is my attempt to alter my page using the second method, which I downloaded the font face thru: Material Design Lite

[mirja_t]

Did you assign the font to an element (or the html) as shown in my post above?
If you add two headlines and style just one of them with ‘Roboto’, you should see a difference. Assign Roboto just to a specific class which you assign to the first headline, like this:
HTML

<h2 class="roboto">Headline: Should be 'Roboto'</h2>
<h2>Headline: default system font</h2>

Your CSS should look like this:

Summary

.roboto {
  font-family: 'Roboto', sans-serif;
}

/* latin */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.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;
}

When I paste this code to fiddle I clearly see the difference. Sublime should do the same.

[denzelsugayan6884482]

Hi, thanks again for working with me on my question. So I tried the method you recommended, but on Sublime it just doesn’t coordinate. Here’s a screenshot of my input, I double check if there’s any syntax error but there isn’t.

I also looked if Safari’s compatible with (woff2) and they are according to @font-face - CSS: Cascading Style Sheets | MDN.

And here’s the outcome after inputing the code recommended:

Thanks again for helping me

[mirja_t]

Ok, then I’m running out of ideas.
The only thing I can now recommend as a last check that there isn’t a typo would be

1. Copy the url to the google font from your css and paste into your browser. See if it downloads the font file to your computer. If it doesn’t, the link isn’t correct.
2. Copy and paste the html and css code from the fiddle link to your files
3. Check if the css file is linked correctly to your html head. For example add a background-color to your .roboto class and see if the color changes. If that doesn’t work, add your styles to the html head.

[denzelsugayan6884482]

I totally understand mirja_t, I’m thankful that you responded to my question and provided solutions. I will try again and re-learn some things I missed during the lesson, there’s definitely wrong with my syntax input or I’m not paying attention lol. Thank you again for your help

[mirja_t]

So could you fix your problem now? From second a look at your screenshot it seems you haven’t linked your stylesheet to the html (bullet 3).

[denzelsugayan6884482]

Hi, I think I get it now, the last time that I tried it there’s no ‘link’ to my html (that was stupid of me) and also the path from my font folder to my css worked perfectly. For a second I was missing a crucial part, but then it couldn’t be more obvious. Here’s the updated syntax I edited

Here’s the after product:

[mirja_t]

Ok great, you’ve got it now!

@denzelsugayan6884482

the last time that I tried it there’s no ‘link’ to my html (that was stupid of me)

So at least that won’t happen to you a second time I guess
Happy coding!