I have a website and I've try to speed up loading of fonts so I've put:
<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"/>
but I've got warning from Chromium:
The resource http://jcubic.pl/css/fonts/bebasneue-webfont.ttf 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 http://jcubic.pl/css/fonts/bebasneue-webfont.woff 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.
I've tried to put the font-face and font-family inside index page in 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>
but I'm keep getting that warning. How can I remove this warning or why it's showing up? run ajax to fetch the font in window.onload?
One point worth going over an early loading of fonts:
You have to add a crossorigin attribute when fetching fonts, as they are fetched using anonymous mode
<link rel="preload" href="{{ '/css/fonts/bebasneue-webfont.woff' | prepend: site.baseurl | prepend: site.url }}"
as="font" type="font/woff" crossorigin/>
<link rel="preload" href="{{ '/css/fonts/bebasneue-webfont.ttf' | prepend: site.baseurl | prepend: site.url }}"
as="font" type="font/ttf" crossorigin/>
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