re: What's the most efficient way to load custom fonts on the web VIEW POST


I don't see any mention yet of Harry Roberts' excellent post on speeding up Google Fonts: csswizardry.com/2020/05/the-fastes...

This is the TLDR;

  - 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"
      crossorigin />

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

<!-- [3] -->
<link rel="stylesheet"
      media="print" onload="this.media='all'" />

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

Half of this is applicable to self-hosted fonts, too.

It's a great article. I've been using this too.

Code of Conduct Report abuse