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?

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. — eQ19, May 13 '18 at 04:24
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." https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content — Avatar, Mar 22 '21 at 21:37

score 48 · Answer 1 · answered May 01 '20 at 16:34

48

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

answered May 01 '20 at 16:34

0xe1λ7r

1,957
22
31

7

_[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#other_resource_preloading_mechanisms)_: 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.** – YektaDev Mar 04 '21 at 06:31
this was only happening for you with google fonts but not with regular fonts I suppose ? – gaurav5430 Sep 07 '21 at 20:01

Thomas Puppe · Accepted Answer · 2018-04-23T12:41:12.433

37

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 .

edited Apr 23 '18 at 12:41

answered Apr 23 '18 at 12:26

Thomas Puppe

624
6
5

71

I added `crossorigin="anonymous"` to my preload `` and it still gives me the preload warning. – Aaron Franke Jan 05 '19 at 20:13

score 16 · Answer 3 · answered Jan 09 '20 at 13:21

16

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.

answered Jan 09 '20 at 13:21

Edvin Uddfalk

381
3
13

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. – ktsangop Mar 10 '21 at 13:00
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 – Barbz_YHOOL Jul 10 '21 at 01:08
what is the reasoning behind this? – gaurav5430 Sep 07 '21 at 20:02

score 12 · Answer 4 · answered Oct 23 '20 at 12:05

12

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

answered Oct 23 '20 at 12:05

Vandesh

6,368
1
26
38

This seems to be applicable for css files, but not for fonts i guess? – gaurav5430 Sep 07 '21 at 20:02
1

This is what worked for me. It's rails app that was trying to load bootstrap.css from a CDN. – Jack Jun 03 '22 at 01:51

score 3 · Answer 5 · answered Feb 09 '22 at 05:23

3

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>

answered Feb 09 '22 at 05:23

Staysee

1,887
5
23
30

1

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 `` version (`/fonts/SomeFont.woff2`), resolve to the same exact file, the browser does not seem to understand this. – Anoesj Sadraee Dec 02 '22 at 14:40
how did you added the hash in the name in index.html? – Manos Kaparos Mar 07 '23 at 14:33
I just copied the filename (with hash) and pasted into index.html. – Staysee Mar 07 '23 at 18:38

score 1 · Answer 6 · answered Aug 19 '21 at 16:20

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");
}

score 1 · Answer 7 · answered Aug 17 '22 at 04:08

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!

preloading font with rel preload

7 Answers7

Linked