The link preload is not avoiding the font loading duplication

Question

I read the link preload documentation. In the head section of the html, I have

<link rel="preload" href="/css/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font">

Later on, I load a font.css file wherein it is loaded exactly the same font file (check the url):

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'), url("/css/fonts/XRXV3I6Li01BKofINeaB.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Bug on Chrome?

But Chrome console gives warning

The resource https://autocosts.work/css/fonts/XRXV3I6Li01BKofINeaB.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

And indeed the browser loads the same file twice (1st and 3rd lines refer exactly to the same file)!

How to make preload work by avoiding file loading duplication?

Assuming your font.css is loaded within "a few seconds", it could be https://crbug.com/653088 — wOxxOm, Feb 04 '19 at 19:59
@wOxxOm thanks for the reply. It seems fonts are a special case wherein the crossorigin must be provided. — João Pimentel Ferreira, Feb 04 '19 at 20:22
so, the warning message and font loading twice are not related, even if the font loads once and is not used within reasonable amount of time you would get this warning — gaurav5430, Oct 10 '21 at 16:54

score 12 · Accepted Answer · edited Jun 20 '20 at 09:12

I solved the issue adding type="font/woff2" crossorigin="anonymous"

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

Fonts are indeed a special case

If you've got your sites' CORS settings worked out properly, you can successfully preload cross-origin resources as long as you set a crossorigin attribute on your element.

One interesting case in which this applies even if the fetch is not cross-origin is font files. Because of various reasons, these have to be fetched using anonymous mode CORS (see Font fetching requirements if you are interested in all the details).

The link preload is not avoiding the font loading duplication

Bug on Chrome?

1 Answers1