preloading font with rel preload

html preload
Gareth Jones picture Gareth Jones · Apr 5, 2018 · Viewed 43.5k times · Source

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;

enter image description here

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?

Answer

Thomas Puppe picture Thomas Puppe · Apr 23, 2018

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 .

Related questions

HTML5 video autoplay but with a 5 seconds of delay

I have a 20 second long HTML5 video loop as the background on my webpage and it is set to autostart. Is it possible to delay the video autoplay for 5 seconds? I am trying to allow the video to load completely …

Read More
Flexslider slow image load

I am using Flexslider on a website I'm building. I like the responsiveness very much and thats the reason I don't wan't to change to nivo-slider or something similar. The negative about it is that it doesn't display the first …

Read More
How can I preload a page using HTML5?

I remember reading about a meta tag that makes the browser preload a page. What's the tag again?

Read More