Figuring out when sources are loaded is a key a part of constructing useful, elegant web sites. We’re used to utilizing the DOMContentLoaded occasion (generally known as “domready”) however do you know there’s an occasion that tells you when all fonts have loaded? Let’s discover ways to use doc.fonts!

The doc.fonts object contains a prepared property which is a Promise representing if fonts have been loaded:

// Await all fonts being loaded
await doc.fonts.prepared;

// Now do one thing!  Perhaps add a category to the physique
doc.physique.classList.add('fonts-loaded');

Font information may be comparatively massive so you may by no means assume they’ve loaded shortly. One merely await from doc.fonts.prepared offers you the reply!