This content originally appeared on David Walsh Blog and was authored by David Walsh
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!
The post Detecting Fonts Ready appeared first on David Walsh Blog.
This content originally appeared on David Walsh Blog and was authored by David Walsh
David Walsh | Sciencx (2022-12-26T14:03:54+00:00) Detecting Fonts Ready. Retrieved from https://www.scien.cx/2022/12/26/detecting-fonts-ready/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.