Photo by Arno Senoner on Unsplash

How to load web fonts quickly

19 April, 2021

When loading webfonts, there's a few tricks you can use to speed up the performance:

  1. Preconnect to external sources that deliver content critical to your rendering.
<link rel="preconnect"
      crossorigin />
  1. Use font-display: swap
<link rel="preload"
      href="https://CSS_URL?&display=swap" />
  1. If you need to support older browsers, that are not supporting font-display: swap, use this swap-hack
<link rel="stylesheet"
      media="print" onload="'all'" />
  1. If you need to support browsers that do not support preload, without Javascript enabled, fall back to the regular way
  <link rel="stylesheet"
        href="$CSS&display=swap" />

This note is a steal from