preloading font with rel preload

Question

I am preloading a font using the HTML tag with the rel attribute set to preload as captured in the snippet below;

<         


        

Answer 1

In my case, changing to rel="stylesheet preload" worked on Chrome -

Here's the bare minimum which WORKED -

<link rel="stylesheet preload" href="path/to/stylesheet" as="style" />

What DID NOT WORK was -

<link rel="preload" href="path/to/stylesheet" as="style" />

Answer 2

Don't know if I am re-opening something that has already been solved here, but I just wanted to mention you need to place the rel="preload" links after the source that loads the fonts, e.g. the CSS file.

Answer 3

I kept getting the warning when trying to load preload a google font.

Turns out I was missing the fact that the font was being loaded as a style from google. I solved this by setting the as="style' and then using rel="stylesheet preload prefetch".

See code example below:

<link 
 as="style"
 rel="stylesheet preload prefetch" 
 href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" 
 type="text/css" 
 crossorigin="anonymous" />

Happy coding =)

Answer 4

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 .

Answer 5

You have to add <link rel="stylesheet" href="fonts/32ADEO.woff2"> after the preloading line.