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?
In summary, without font preloading, you might run into a situation where a browser is ready to load your site's text, but it can't because the font isn't available yet. That is, it needs to download the font before it can paint the text.
So, now how to you preload your CSS and other external resources? The answer is simpler than you think. Currently, you load CSS and JS through the link tag. So, to preload those resources, all you need is to change the rel attribute to preload and add the as=”style” attribute (or as=”script” for JavaScript).
Preload is an early fetch instruction to the browser to request a resource needed for a page (key scripts, Web Fonts, hero images). Prefetch serves a slightly different use case — a future navigation by the user (e.g between views or pages) where fetched resources and requests need to persist across navigations.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With