[Solar19]

Faster still would be to skip the request for the CSS altogether by inlining it in the head. Therefore you'd just request the font immediately and directly. This makes the preconnect moot, and should be faster.

Faster still is to use already installed fonts, as others have noted. But don't use "system" fonts if that means UI fonts like San Francisco or Segue. Exploit the rich font options on the desktop: Georgia, Sitka Text (Windows 8.1+), Calibri, Hoef, etc. Bootstrap and Medium started a ridiculous fad of using system UI fonts for body text. There are actual body text fonts available people.

[csswizardry]

OP here. Inlining CSS won’t work as the request is UA-sniffed.

[r1ch]

Modern browsers are smart enough to only download the required file type, sniffing is unnecessary the vast majority of the time and you save an entire 3rd party connection.

There are tools like https://google-webfonts-helper.herokuapp.com/fonts which will get you the needed css.

[csswizardry]

I know how browsers work, but thanks.

The tool you linked does not solve the same problem, as the problems isn’t file types but URIs. Google is able to provide the tiniest possibly font files by hinting them for the specific browser/platform requesting them. We never consistently or predictably know the resultant URI of a Google Fonts-hosted font file. Here is a Tweet to the same effect from two days ago. Believe me, I’ve researched this :(

https://twitter.com/csswizardry/status/1265716520346320903

[r1ch]

The URLs on gstatic.com are static. I've been doing this for years in production without issues.

[cmbuckley]

The fonts are static, but the CSS (from fonts.googleapis.com), and the font files it references, vary depending on the User-Agent. For instance, with a Chrome UA it will request WOFF files; with a blank UA it may request TTF files.

[r1ch]

The idea is that you take all the links to the different font types and put them directly in your local CSS. Your browser knows which formats it supports, if you have TTF and WOFF2 fonts linked, Chrome will only download the WOFF2 version. No need to send an extra 3rd party request just to get a piece of CSS that only links a single file type.

[toast0]

You could use a couple microseconds on the server to inline CSS to match the HTTP U-A; assuming whatever you needed to know is still in there by the grace of Google whenever they slush up the U-A strings.