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:



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:


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:


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


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