How to wait for all the fonts to load on a webpage using JavaScript?

Published August 28, 2020

Many times we may want to do some work after all our fonts are loaded on a webpage.

We can do this using the document.fonts object.

The object returns another object called FontFaceSet in which you can find the ready property.

  • The ready in the FontFaceSet is a Promise.

  • This promise is resolved only after the fonts in an HTML document is loaded.

Let's write the code to understand it better.

document.fonts.ready
  .then(() => {
    // do those operations after
    // the fonts are loaded here
    console.log("Fonts are loaded!!!");
  })
  .catch(() => {
    console.log("Error");
  });

Here we have written a then() handler to do some operations when our fonts are loaded and a catch() handler when there is an error in loading fonts.

Feel free to share if you found this useful 😃.


Share on: Facebook Twitter