preloading font with rel preload

Question

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?

Shove

I got the same message when caling disqus plug-in: The resource https://c.disquscdn.com/next/embed/styles/lounge.188f59a1df04c219bf32da7f76545092.css 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. – Oral

Purpose of preload: "specifying resources that your page will need very soon which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance." developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content – Qktp

Answer 1

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 .

Kingpin

I added crossorigin="anonymous" to my preload <link> and it still gives me the preload warning. – Somnolent

Answer 2

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 =)

Marianomaribel

MDN: <link rel="prefetch"> has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the next navigation/page load. – Sequestration

this was only happening for you with google fonts but not with regular fonts I suppose ? – Dashiell

this should be the accepted answer. I even had "crossorigin" set to anonymous and still got the warning. Then I set "as" and "rel" as suggested and it no longer gave the warning. – Flessel

Answer 3

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.

Pasteur

This has helped me identify my problem. I had this problem in an Angular app which was lazy loading the fontawesome CSS/font, and was producing a rendering delay. – Vallo

not for me, it works before and after. Also without the "crossorigin" attribute, it improved by 50% on slow 3G but with the crossorigin attr, it is instantaneous, i'm shocked as to how good this feature is – Piping

what is the reasoning behind this? – Dashiell

Answer 4

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" />

Quitt

This seems to be applicable for css files, but not for fonts i guess? – Dashiell

This is what worked for me. It's rails app that was trying to load bootstrap.css from a CDN. – Bolingbroke

Answer 5

I ran into this issue with a self hosted font. I was preloading it like this:

<link rel="preload" href="/fonts/SomeFont.woff2" as="font" type="font/woff2" crossorigin>

The problem was that webpack was adding a hash to the compiled css font path.

/* Before */
@font-face {
    font-family: "SomeFont";
    src: url("../fonts/SomeFont.woff2") format("woff2");
}

/* After (Webpack Output) */
@font-face {
    font-family: "SomeFont";
    src: url("../fonts/SomeFont.woff2?7d18a001dd0b6e04c2393") format("woff2");
}

So I added the same hash to the preload tag and problem solved!

<link rel="preload" href="/fonts/SomeFont.woff2?7d18a001dd0b6e04c2393" as="font" type="font/woff2" crossorigin>

Geodetic

Similar thing in Nuxt 3. For some reason, it prepends the path in src properties of @font-face rules with /_nuxt during development. Even though both paths, so the @font-face src version (/_nuxt/fonts/SomeFont.woff2) and the <link rel="preload"> version (/fonts/SomeFont.woff2), resolve to the same exact file, the browser does not seem to understand this. – Sizing

how did you added the hash in the name in index.html? – Coracorabel

I just copied the filename (with hash) and pasted into index.html. – Geodetic

Same thing with django-compressor converting font awesome's scss and using a hash as a "cache buster". See COMPRESS_CSS_HASHING_METHOD to disable it. – Infecund

Answer 6

I had even more fun. In addition to this warning, I found that my browser downloads both woff and woff2, although it should only woff2. Changing the order of src descriptors in @font-face helped me. In the end, the solution for me looks something like this:

<link href="/assets/fira-sans-condensed-v5-max-regular.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="/assets/bundle.css" rel="stylesheet">

@font-face
{
    font-display: swap;
    font-family: "Fira Sans Condensed";
    font-style: normal;
    font-weight: 400;
    src: url("/assets/fira-sans-condensed-v5-max-regular.woff") format("woff");
    src: url("/assets/fira-sans-condensed-v5-max-regular.woff2") format("woff2");
}

Prance

Answer 7

In my case, it matters what order the attributes are in. For instance, this order worked

<link rel="preload" href="/fonts/opensans-regular.woff2" as="font" type="font/woff2" crossorigin>

While this didn't

<link rel="preload" as="font" type="font/woff2" href="/fonts/opensans-regular.woff2" crossorigin>

It seems to like it if you have the href before the type and as attributes. Of course, don't forget about the crossorigin attribute at the end!

Grillo