Detecting Fonts Prepared

Spread the love

Understanding when sources are loaded is a key a part of constructing purposeful, 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 recordsdata might be comparatively massive so you may by no means assume they’ve loaded rapidly. One merely await from doc.fonts.prepared provides you the reply!

  • iPhone-Style Passwords Using MooTools PassShark

    Each infrequently I come throughout a plugin that blows me out of the water and the newest offender is PassShark: a MooTools plugin that duplicates the iPhone’s technique of exhibiting/hiding the final character in a password discipline. This gem of…

  • Multiple File Upload Input

    Most of the time, I discover myself desirous to add a couple of file at a time.  Having to make use of a number of “file” INPUT components is annoying, gradual, and inefficient.  And if I hate them, I am unable to think about how irritated my customers can be.  Fortunately Safari, Chrome…


Leave a Reply

Your email address will not be published. Required fields are marked *