Window.onload Triggered Before Font-face Load

The following webpage loads Font Awesome, displays the icon fa-check, and has a debugger breakpoint on window.onload:

Solution 1:

Figuring out exactly when a font has loaded on the page is unfortunately a very difficult problem, especially when you have to support multiple browsers/devices. Last time I took a survey there was no magic bullet but many people have written up their approaches. See here and here and here.

Solution 2:

You can check the font loading status using document.fonts.ready which returns a promise you can resolve, using then(...):

document.fonts.ready.then(function() {
  // Any operation that needs to be done only after all the fonts
  // have finished loading can go here.
});

It is considered 'experimental', see supported browsers here:
https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts

Share