Menu
I am preloading a font using the <link> HTML tag with the rel attribute set to preload as captured in the snippet below;
<link rel="preload" href="fonts/32ADEO.woff2" as="font" type="font/woff2"> While this works as expected by loading the typeface, it gets loaded again.
The screenshot of the network tab in Google Chrome browser shows the typeface loading twice - see below;
Also, I get the following warning in the Google Chrome browser console tab;
The resource https://example.com/new-v8/fonts/32A0E0.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it Please make sure it has an appropriate 'as' value and it is preloaded intentionally.
What am I doing wrong and how can I fix it?
673
In summary, without font preloading, you might run into a situation where a browser is ready to load your site's text, but it can't because the font isn't available yet. That is, it needs to download the font before it can paint the text.
<link rel="preload"> tells the browser to download and cache a resource (like a script or a stylesheet) as soon as possible. It's helpful when you need that resource a few seconds after loading the page, and you want to speed it up.
Preloading Google Fonts also reduces the loading time by around 100ms. The reason for this is DNS, TCP, and TLS load in parallel with the Google Fonts CSS file. Preloading requires you to pre-connect and use a preload link in the stylesheet.
Your preload-Tag takes the argument "crossorigin", which must be given for Webfonts, even if they are on the same host as your website.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Cross-origin_fetches or https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/#early-loading-of-fonts .
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
