Chrome unused preload warning for an icon font that is used

Question

I have an icon font that I preload in Chrome with

<link rel="preload" as="font" type="font/ttf" href="/static/media/IconFont.ad47b1fb.ttf" crossorigin="anonymous">

and reference later in my CSS with

@font-face {
  font-family: "IconFont";
  src: url(/static/media/IconFont.d9fff078.eot);
  src: url(/static/media/IconFont.d9fff078.eot#iefix)
      format("embedded-opentype"),
    url(/static/media/IconFont.ad47b1fb.ttf) format("truetype"),
    url(/static/media/IconFont.c8a8e064.woff) format("woff"),
    url(/static/media/IconFont.979fb19e.svg#IconFont) format("svg");
  font-weight: normal;
  font-style: normal;
}

Within one second of the page loading I use Unicode code point U+E95B with my icon font.

I still get a warning from Chrome, though, that says:

The resource http://localhost:3000/static/media/IconFont.ad47b1fb.ttf 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.

How do I get rid of this warning?

is this the only warning you get on the console ? do you get anything related to the `crossorigin` attribute ? does any resource fail ? — Towkir, May 02 '19 at 09:43
The resource does not fail to load. In the Network tab I only see one network request. — Calebmer, May 03 '19 at 03:37
as the resource is being loaded from this same domain ( which is your localhost / project directory ) try removing `crossorigin` attribute, this worked for me, let me know what happens. — Towkir, May 03 '19 at 03:38
Possible duplicate of https://stackoverflow.com/questions/49674092/preloading-font-with-rel-preload — yunzen, May 03 '19 at 13:39
@yunzen I don't think it is a duplicate. If you look at the referenced question you will see that the solution is to add a `crossorigin` attribute. However, in this case the `link` already has a `crossorigin` attribute. — Aaron3219, May 03 '19 at 17:23
@Towkir yes the resource is being loaded from the same document. No removing the `crossorigin="anonymous"` attribute does not fix the issue — Calebmer, May 03 '19 at 20:52

Steve Lage · Accepted Answer · 2019-05-05T14:56:27.117

Try changing from rel="preload" to rel="prefetch".

<link rel="prefetch" as="font" type="font/ttf" href="/static/media/IconFont.ad47b1fb.ttf" crossorigin="anonymous">

rel="prefetch" is used for a specific resource that is required but not use immediately. Chrome apparently isn't registering it's use in time and gives the warning, which is my guess.

If prefetch doesn't work try rel="dns-prefetch". rel="dns-prefetch" tells the browser to resolve the dns so when it is needed it can be loaded quickly.

I think prefetch should work though, as it actually requests and downloads the resource and stores it in the cache for later use, but it doesn't cause the browser warning if it isn't used quickly.

[EDIT]
According to this page this page, load your css first also using preload, then your font, i.e.

  <link rel="preload" as="style" href="[your-css-file-here.css]">
  <link rel="preload" as="font" crossorigin type="font/tff" href="/static/media/IconFont.ad47b1fb.ttf">

Both the css and the font are preloaded then the page renders, so the css doesn't have to be loaded after the font.

In your css file add "local('IconFont')," shown below, full example here

src: local('IconFont'),
    url(/static/media/IconFont.ad47b1fb.ttf) format("truetype"),
    url(/static/media/IconFont.ad47b1fb.ttf) format("woff"),
    /* continue your font declaration */

About all I can think of to help with this. Hope this helps.

The resource is used immediately. Within one second of the page loading I use Unicode code point U+E95B. I prefer the semantics of preload since the icon font will be immediately used. — Calebmer, May 03 '19 at 20:54
From [this page](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization) that you linked it’s written that “WOFF2 [should] always [be] the format that you preload.”. I don’t have a WOFF2 font, but I do have a WOFF font, initially switching to that works, but this warning repros inconsistently so I’ll need to test for a bit… — Calebmer, May 06 '19 at 17:38
I’m starting to think this might be a Chrome bug since I’m using a Unicode character (U+E95B) in the “[Supplementary Special-purpose Plane](https://en.wikipedia.org/wiki/Plane_(Unicode)#Supplementary_Special-purpose_Plane)” — Calebmer, May 06 '19 at 17:40
Accepting since I ended up using WOFF instead of TTF which appears to fix it. — Calebmer, May 07 '19 at 18:07

score -1 · Answer 2 · answered May 15 '22 at 08:59

-1

This is an example from MDN.

https://mdn.github.io/html-examples/link-rel-preload/fonts/

And that gives the same warning too. When i open the developer tool and press Ctrl+F5 which forces the browser to hard loading of all resources this warning does not come across. If I load the page with F5 warning appears. So this should be a some kind of confusion on browser side. But i couldn't find a reliable answer.

https://github.com/mdn/html-examples/blob/master/link-rel-preload/fonts/index.html

answered May 15 '22 at 08:59

sedat

9
1

1

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/31777473) – Skylar Ittner May 19 '22 at 23:34

Chrome unused preload warning for an icon font that is used

2 Answers2