CODEWITHSUNDEEP
javascriptcanvasgoogle-font-api
Adam
Adam

Reputation: 443

Static URLs to Google Fonts

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.

Upvotes: 5

Views: 9044

Answers (3)

Marcin Ignac
Marcin Ignac

Reputation: 101

  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

Upvotes: 10

Joel
Joel

Reputation: 6203

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;
}

Upvotes: 5

Adam
Adam

Reputation: 443

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.com/css?family=Roboto:400,300,500,700,900,100italic,300italic,400italic,500italic,700italic,900italic,100

Or:

https://fonts.googleapis.com/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.com/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;
}

Upvotes: -1

Related Questions