Fastest way to Google Fonts

Posted on May 26, 2020

Harry Roberts writes about fastest ways of loading Google fonts on his blog:

It’s widely accepted that self-hosted fonts are the fastest option: same origin means reduced network negotiation, predictable URLs mean we can preload, self-hosted means we can set our own cache-control directives, and full ownership mitigates the risks that come with leaving static assets on third-party origins.

That said, the convenience of a service like Google Fonts cannot be overstated. Their ability to serve the tiniest possible font files tailored to specific user agents and platforms is amazing, and with such a huge, freely-available library served from Google-grade CDNs… I definitely see why people continue to turn to it.

Well, yes. Self hosting fonts is a pain. Can we make it a little faster with the CDN?

Harry dives into a private instance of Webpage test and marks the performance metrics for each attribute that can be used. Here is what he ends up doing:

2 - 1. Preemptively warm up the fonts’ origin.
3 -
4 - 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
5 - most modern browsers.
6 -
7 - 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
8 - only after it’s arrived. Works in all browsers with JavaScript enabled.
9 -
10 - 4. In the unlikely event that a visitor has intentionally disabled
11 - JavaScript, fall back to the original method. The good news is that,
12 - although this is a render-blocking request, it can still make use of the
13 - preconnect which makes it marginally faster than the default.
14 -->
16<!-- [1] -->
17<link rel="preconnect"
18 href=""
19 crossorigin />
21<!-- [2] -->
22<link rel="preload"
23 as="style"
24 href="$CSS&display=swap" />
26<!-- [3] -->
27<link rel="stylesheet"
28 href="$CSS&display=swap"
29 media="print" onload="'all'" />
31<!-- [4] -->
33 <link rel="stylesheet"
34 href="$CSS&display=swap" />

We can find a sample to this on Harry’s site:

1<!-- [1] -->
2<link rel="preconnect" href="" crossorigin="">
4<!-- [2] -->
5<link rel="preload" as="style" href=",wght@0,900;1,900&amp;family=Roboto:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap">
7<!-- [3] -->
8<link rel="stylesheet" href=",wght@0,900;1,900&amp;family=Roboto:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" media="all" onload="'all'">

On to the fast lane! 👏👏


Buy me a coffeeBuy me a coffee