Where to find the google fonts latin code

Hi guys,
I need some help. I am learning CSS typography and I really don’t get how to obtain the google fonts latin code. This is the link to the project in Codecademy: https://www.codecademy.com/courses/learn-css/lessons/css-typography/exercises/font-face-i
How do I obtain that code from the google fonts page after selecting the fonts I want? How do I then get that into my CSS sheet? Also, to create a rule, how does the file I create refer to the fonts code? I watched the video, but I still don’t get it.
Please someone help before I go crazy :rofl::rofl::rofl:

Thanks!

Tina.

1 Like

Welcome to the forums! Here’s an example with Roboto for what to do.

  1. Copy the value of the href attribute in the <link> element from this page. https://fonts.google.com/specimen/Roboto?preview.text_type=custom&sidebar.open=true&selection.family=Roboto is what you should have copied.
  2. Paste the link into your browser and find the set of rules labelled as /* latin */.
  3. Copy each of the rules under /* latin */ and paste them into your stylesheet at the top.

Thanks Victoria. I have done that and watched the walkthrough video too, but it just isn’t working for me. I’m on a MacBook Pro 2020, I do use safari, but when I tried the same thing in google chrome, I didn’t get the desired result either. :unamused:

Hi there.

To select your fonts, you will need to go to the Google Fonts page.

Once you’re there, select the font(s) that you want to use. Let’s say, for example, you choose Open Sans. You’ll see a page which looks like this:

If you select a couple of styles - for example Light 300, Regular 400, and Semi-bold 600 - you’ll see the following panel will pop-in from the right:

In the panel, under “Use on the web”, Google provide a short snippet of code which you can place directly in your HTML to import the fonts. In my example using Open Sans, it looks like this:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">

The second <link> tag contains the URI that you see pasted into the browser in the walkthrough video:

https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap

If you paste that URI into any browser, you’ll see the raw file that defines the font families for use in CSS and here is where you can find the definitions for the “Latin” variants:

Since we’ve selected several font weights (300, 400, and 600) there will be multiple @font-face {} declarations which are marked as /* latin */ or /* latin-ext */.

Hope that helps. :slight_smile:

2 Likes

Thanks so much! That was super helpful and now I can get them :slight_smile:

2 Likes

No problem, let us know if you get stuck with anything else. :slight_smile:

Hi…is this the ONLY way to get the “latin code” ? as described above.

  1. Choose your fonts in “google fonts”, copy and paste that link into your HTML.
  2. Copy and paste that link from HTML into your browser.
  3. Copy and paste the latin code(s) from your browser into CSS.
    You have to create the fonts and links then copy/paste everything?
    Thx

Select the three fonts and the correct weights from the API. Use the provided <link> tag in the ***<header>*** to link the fonts to your page.
IT SAYS TO PUT LINK TAG IN header. DO THEY MEAN IN THE head AT THE TOP OF THE html file?