18

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?

jcubic
  • 61,973
  • 54
  • 229
  • 402
  • Can you confirm that the h1 is indeed inside the header, that you don't have a font called "Bebas" installed locally and that Chrome is not actually using the eot or svg file? – Mr Lister Dec 02 '17 at 14:41
  • By the way, the default font-style for h1 is `bold`, and you have `font-style:normal` specified in the font-face rule. I'm not sure if that matters. – Mr Lister Dec 02 '17 at 14:43
  • @MrLister It seems that chromium is using svg, thanks. – jcubic Dec 03 '17 at 08:08

1 Answers1

15

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/>
eQ19
  • 9,880
  • 3
  • 65
  • 77