skip to content
Notes && Anecdotes
Photo by Arno Senoner on UnsplashPhoto by Arno Senoner on Unsplash

How to load web fonts quickly


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="" 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="'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