Stop blindly preloading fonts

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:

Webpagetest.org screenshot

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:

Before
After

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*