对于使用的图标字体，Chrome 未使用预加载警告

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?

Answer 1

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, ie

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

Answer 2

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