Static URLs to Google Fonts

Question

I'm trying to use a Google Font with JavaScript and the HTML canvas. I have found a method that works, but it requires that I reference the Google Font using a static URL:

let googleFont = new FontFace(
    "Lato",
    "url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2)"
);

I've seen these static URLs in other Stack Overflow posts, but I don't know where to find them in the Google Fonts tool.

Anyone know where to generate these URLs for any Google Font?

Edit: I'm aware I can download and host the fonts, but I would like to load the fonts directly from Google.

Edit: I'm NOT looking to use the @import, LINK, or fonts.googleapis.com method. I need the reference using the fonts.gstatic.com URL.

Answer 1

1. go to google fonts and locate the font you want to use
2. in the "Use on web" sidebar locate the css link e.g. ""
3. load the css url in browser e.g. https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap
4. find the url in the loaded css e.g. https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYAZ9hjp-Ek-_EeA.woff

Answer 2

There's barely a performance hit, but sure. You can read more about the potential cold-start performance hits here:

Here's how you get the URLs:

curl -X GET "<your_fonts.googleapis.com_url>"

But this alone gets you the TTF version.

The gstatic namespace is just where it's hosted on Google servers. Which font fonts.googleapis.com will return for you is based on your user-agent.

So, in order to get the woff2 files, you will need to do something like this:

// https://fonts.googleapis.com/css?family=Lato:400

$ curl -X GET --user-agent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36" "https://fonts.googleapis.com/css?family=Lato:400"

Returns:

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wXiWtFCc.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;
}