Warning that font preload was not used within a few seconds from the window's load event

Question

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?

Ceylon

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? – Polypoid

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. – Polypoid

@MrLister It seems that chromium is using svg, thanks. – Ceylon

Answer 1

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/>

Bushweller

Answer 2

I know this is old but you haven't marked an answer as Accepted, and this may help others. It looks like you had a difference in the scheme used to load the font file compared to the preload directive. The error message you quoted refers to the http scheme:

http://jcubic.pl/css/fonts/bebasneue-webfont.ttf 

But it's a good bet you were loading the web page using https, e.g.:

https://jcubic.pl/somefile.html

With the styles inline (or defined in a CSS file also loaded over https), a reference to a font file /css/fonts/bebasneue-webfont.ttf (and it looks like you're using some kind of templating engine where site.baseurl and site.url were prepended, which you don't show the working of but from the error message it looks like it prepended http://jcubic.pl), this would have caused the browser to load the font from the URL:

https://jcubic.pl/css/fonts/bebasneue-webfont.ttf

The full URL to the font file has to exactly match, between the @font-face declaration and the preload directive.

In my case I was running into this same error message because I was adding a cachebust value to the preload link, e.g.:

<link href="my/font.woff2?t=12345" rel=preload as=font type="font/woff2" crossorigin>

But in my CSS I did not include that same t=12345 cachebust directive:

@font-face {
    font-family: 'MyFont';
    src: url('my/font.woff2');
}

To fix this I would need to make the URLs match, by adding t=12345 to the @font-face URL.

Precondition

No, this post is from 2017 where http was common. I think that the problem is because CSS font have different file formats and only one is loaded by the browser. – Ceylon

I see what you mean @jcubic, however if I add a preload directive for my ttf file and the woff2 file is used, Chrome does not show the error message about the preloaded font not being used. Maybe this newer version is smarter but I'd suspect this was an issue in 2017 too and it would have been smart then, too. If I deliberately mismatch my http/https scheme, it does emit the error. Also I wouldn't say "http was common" at all, it just sounds like you didn't know how to set up https properly :) – Precondition

Man, this was 7 years ago. But if you really want to know the code is Open Source, you can check the git history: github.com/jcubic/jcubic.pl I don't have time for this. – Ceylon

As I said, your original error seems to be to do with how you were serving the files (http vs https) rather than an error in the code base, though you didn't provide full details of how you were making the requests. I'm just commenting here to help others with a similar problem, as this post may be from 7 years ago but the fundamentals are still relevant today. – Precondition

How the problem is with website but not with codebase. The website is the codebase. There was only one URL with origin for the whole project. The live website is the output of the codebase on GitHub. There are no other code. – Ceylon

The configuration of a system can be separate from the code base, and can alter the runtime behaviour of the system dramatically. You haven't provided a minimal reproducible example (see stackoverflow.com/help/minimal-reproducible-example) and I don't have time to dig into your project to figure out the details. I've been trying to talk at an abstract level about behaviour, based on what details you shared in your question above. – Precondition

Sorry I don't have time to dig into my project and create reproduction for the issue I have 7 years ago. Your answer is definitely wrong. Everything is in the question. There is nothing in the system that can change how HTML works. – Ceylon

What about my answer was wrong? It was a good bet you were using https; you have since said you were using http in the comments, fair enough. The only HTML you gave in the Question used "{{" syntax and site.baseurl and site.url configuration values, which did not make it clear what actual HTML the browser received. The example I gave in my Answer about preload vs CSS @font-face is valid. It's possible we're both correct, I was trying to work towards a helpful conclusion. I assume you downvoted my Answer, seems rather reactionary :) – Precondition