Chrome unused preload warning for an icon font that is used

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.