Detecting Fonts Ready

By  on  

Knowing when resources are loaded is a key part of building functional, elegant websites. We're used to using the DOMContentLoaded event (commonly referred to as "domready") but did you know there's an event that tells you when all fonts have loaded? Let's learn how to use document.fonts!

The document.fonts object features a ready property which is a Promise representing if fonts have been loaded:

// Await all fonts being loaded
await document.fonts.ready;

// Now do something!  Maybe add a class to the body
document.body.classList.add('fonts-loaded');

Font files can be relatively large so you can never assume they've loaded quickly. One simply await from document.fonts.ready gives you the answer!

Recent Features

Incredible Demos

  • By
    jQuery Countdown Plugin

    You've probably been to sites like RapidShare and MegaUpload that allow you to download files but make you wait a specified number of seconds before giving you the download link. I've created a similar script but my script allows you to animate the CSS font-size...

  • By
    MooTools 1.2 OpenLinks Plugin

    I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!