onfontready docs

November 5, 2016 ยท View on GitHub

onfontready is a very small Javascript library for detecting fonts in browsers. By detecting font loading and parsing with onfontready, pages can avoid Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT). onfontready can also be used to detect if a named font is already installed locally on the client machine.

onfontready does not make any assumptions about how it will be used. It is meant to be a foundation for other techniques, not a catch-all library for every scenario. Read about Recipes and Usage Patterns to discover how to use onfontready for your project. There are additional resources for Multi-Font Detection and Promise Shim Usage. Make sure to serve all users by Handling Disabled Javascript.

onfontready can detect fonts in most, if not all browsers that support both custom fonts and Javascript. Even Internet Explorer 6, 7, and 8 are supported with the legacy version. Read about Legacy Version Differences.

With the right options, all known fonts should be detectable with onfontready. However, it is possible to create a font that onfontready cannot detect. Read about How to Break onfontready.

At its core, onfontready uses carefully crafted CSS and iframes to determine when a single font is both loaded and parsed by the browser, completely ready for use. Read about How it Works to understand onfontready's inner workings.

onfontready is heavily optimized for size. It uses strange code structures that result in the smallest possible size after gzip compression. Read about Compression Techniques used in the library.

onfontready is built from a single source file into multiple versions for testing and distribution, as well as the legacy and modern variants. Read about Building onfontready.

Other Resources

Some other font-related resources that might come in handy.