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(.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 method. I need the reference using the fonts.gstatic URL.

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./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. method. I need the reference using the fonts.gstatic. URL.

• javascript
• canvas
• google-font-api

• 1 At one point the returned URL was client-specific; I'd be wary. But also things like google-webfonts-helper.herokuapp./fonts/merriweather – Dave Newton Commented Oct 14, 2022 at 14:52
• 1 By looking at the URL of any font loaded in your browser developer tools / network tab but as far as I can tell, this is undocumented. Why don't you download the font and use the font file locally? – MrUpsidown Commented Oct 14, 2022 at 14:52

3 Answers 3

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./css2?family=Inter:wght@600&display=swap
4. find the url in the loaded css e.g. https://fonts.gstatic./s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYAZ9hjp-Ek-_EeA.woff

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._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. 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./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./css?family=Lato:400"

Returns:

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic./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./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;
}

In case anyone else is looking for the same information, the easiest method I found to locate the static font URLs was to open a link to the relevant font using the Google Fonts API:

https://fonts.googleapis./css?family=Roboto:400,300,500,700,900,100italic,300italic,400italic,500italic,700italic,900italic,100

Or:

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

In this API endpoint are all the static font URLs, for example:

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url(https://fonts.gstatic./s/roboto/v30/KFOiCnqEu92Fr1Mu51QrEzAdL-vwnYg.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;
}