CODEWITHSUNDEEP
htmlgoogle-chromegoogle-chrome-devtoolspreload
João Pimentel Ferreira
João Pimentel Ferreira

Reputation: 16263

The link preload is not avoiding the font loading duplication

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)! enter image description here

How to make preload work by avoiding file loading duplication?

Upvotes: 12

Views: 7828

Answers (1)

Jo&#227;o Pimentel Ferreira
Jo&#227;o Pimentel Ferreira

Reputation: 16263

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

Upvotes: 13

Related Questions