typekit/webfontloader

Web Font Loader is a JavaScript library that gives you control over how custom fonts load in a browser. Without a tool like this, when you tell a browser to use a font from an external source, you get little feedback about whether the font actually loaded or what to show users in the meantime. Web Font Loader was co-developed by Google and Typekit to solve that problem. The library works with several font services out of the box: Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as fonts you host yourself. You tell it which fonts you want, and it handles the loading. You include it in a webpage via a script tag or install it as a package through npm, then write a small configuration block that names the fonts and services you are using. What makes this library useful is its event system. As fonts move through the loading process, the library fires events you can respond to. There are events for when loading starts, when a font renders successfully, and when a font fails to load. These events are available both as JavaScript callback functions and as CSS class names added to the page's root element. For example, while fonts are loading, a class called wf-loading is added to the page, once they render, it switches to wf-active. This lets you write styles that prevent the jarring effect where text first appears in a fallback font and then jumps to the intended font once it loads. You can load the library synchronously, which blocks the page from rendering until the fonts are ready and avoids the font-swap flash entirely, or asynchronously, which lets the page load faster but may result in that brief unstyled-text moment. The library includes a timeout setting, defaulting to five seconds, after which a font that has not loaded triggers a failure event so the page can fall back gracefully. The project is no longer actively maintained according to the repository's current state, but the library is stable and is still widely available via Google's hosted CDN, jsDelivr, and CDNJS.