Detecting Fonts Ready
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!
![Welcome to My New Office]()
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
![9 Mind-Blowing Canvas Demos]()
The <canvas> element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3]()
Row highlighting and individual cell highlighting in tables is pretty simple in every browser that supports :hover on all elements (basically everything except IE6). Column highlighting is a bit more difficult. Luckily MooTools 1.2.3 makes the process easy.
The XHTML
A normal table. The cells...
![Chris Coyier’s Favorite CodePen Demos]()
David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...
