I've been working on optimizing the loading speed of fonts on my website, so I added the following:
<link rel="preload" href="{{ '/css/fonts/bebasneue-webfont.woff' | prepend: site.baseurl | prepend: site.url }}"
as="font" type="font/woff"/>
<link rel="preload" href="{{ '/css/fonts/bebasneue-webfont.ttf' | prepend: site.baseurl | prepend: site.url }}"
as="font" type="font/ttf"/>
However, I received a warning from Chromium:
The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
Attempting to address this issue, I even tried embedding font-face and font-family within the index page using inline style:
<style type="text/css">
@font-face {
font-family: 'bebas';
src: url('/css/fonts/bebasneue-webfont.eot');
src: url('/css/fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/fonts/bebasneue-webfont.woff') format('woff'),
url('/css/fonts/bebasneue-webfont.ttf') format('truetype'),
url('/css/fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
header h1 {
top: 0;
left: 0;
margin: 20px;
font-family: bebas;
font-size: 4em;
}
</style>
Despite these efforts, the warning persists. How can I resolve this warning or why is it appearing in the first place? Should I consider running an Ajax request to fetch the font during window.onload?