Fastest way to Google Fonts

5/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:

<!--
  - 1. Preemptively warm up the fonts’ origin.
  -
  - 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
  -    most modern browsers.
  -
  - 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
  -    only after it’s arrived. Works in all browsers with JavaScript enabled.
  -
  - 4. In the unlikely event that a visitor has intentionally disabled
  -    JavaScript, fall back to the original method. The good news is that,
  -    although this is a render-blocking request, it can still make use of the
  -    preconnect which makes it marginally faster than the default.
  -->

<!-- [1] -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- [2] -->
<link rel="preload" as="style" href="$CSS&display=swap" />

<!-- [3] -->
<link
  rel="stylesheet"
  href="$CSS&display=swap"
  media="print"
  onload="this.media='all'"
/>

<!-- [4] -->
<noscript>
  <link rel="stylesheet" href="$CSS&display=swap" />
</noscript>

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

<!-- [1] -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />

<!-- [2] -->
<link
  rel="preload"
  as="style"
  href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,900;1,900&amp;family=Roboto:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap"
/>

<!-- [3] -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,900;1,900&amp;family=Roboto:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap"
  media="all"
  onload="this.media='all'"
/>

On to the fast lane! 👏👏

Subscribe to JEM Newsletter