After writing my first post about how to be notified when specific font-families downloaded and rendered on a web page, I kept thinking that this approach wasn’t too efficient. The fact that the time taking to download and render fonts on a web page depends on many different factors like the network latency and processing power of the client device, makes it difficult to choose the right time interval for sampling dimensions of elements. Using too long interval may introduce extra waiting time if the font was loaded just after new timer iteration was started. On the other hand, using too short interval may present processing time overhead when trying to get the dimensions of elements by obtaining layout triggering properties like
offsetHeight. So I kept thinking how you can force the browser to notify you when custom font is loaded without polling the dimensions of “font container” element.
Following event timeline overview show the difference between the events fired in web page when using typekit’s Web Font Loader that uses timeouts, and the events fired when using method that does not use timeouts, as explained in this post. These event timelines are taken from the chrome developer tools.
typekit events timeline (with timeouts)
fontloader event timeline (without timeouts)
If you just want to use the FontLoader without reading this post you can download it on Github:
Download on Github