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"
      href="https://fonts.gstatic.com"
      crossorigin />
  1. Use font-display: swap
<link rel="preload"
      as="style"
      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"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />
  1. If you need to support browsers that do not support preload, without Javascript enabled, fall back to the regular way
<noscript>
  <link rel="stylesheet"
        href="$CSS&display=swap" />
</noscript>

This note is a steal from csswizardry.com/2020/05/the-fastest-google-fonts/.

Related