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 😃.