For a while now I thought that preloading your custom fonts was the way to go. In my defense in the past that was the recommended approach.
<link rel="preload" href="/fonts/cookie-v12-latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>
<link rel="preload" href="/fonts/raleway-v18-latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>
<link rel="preload" href="/fonts/raleway-v18-latin-800.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>
<link rel="preload" href="/fonts/raleway-v18-latin-italic.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>
Code language: HTML, XML (xml)Well, no longer 👋
I did a quick test with my cat's site Haku.cat and the result is clear:
What exactly happened here?
The fonts stopped being a render blocking resource and moved down the waterfall allowing the browser to download the image before the font.
💡 This, might be something you don't want. Sure. Perhaps instead of 5 preloads you could only add the font preload for the most prominent text? Main body text? First heading? Menu?
In my case, I'd rather have the image load faster than the font. So removing the preload makes sense:
