Search code examples
htmlcssgoogle-chromefontspreload

Chrome unused preload warning for an icon font that is used

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?

Solution

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