Technology that enables people to use fonts on demand over the Web without requiring installation in the operating system.

- Wiki
9 articles, 0 books.

There are tons of approaches to efficient web font loading but this is the one I like the most.

Load web fonts asynchronously. Avoid big reflows in layout. Load web fonts as fast as possible. Avoid loading web fonts for recurring visitors.

Font loading is crucial for good typography

If you’re not currently using a font loading strategy, using preload with web fonts will reduce the amount of FOIT visitors will see when they visit your site—paid for by sacrificing initial render time.

Web font load­ing may seem com­pli­cated, but it is ac­tu­ally quite sim­ple if you use these font load­ing pat­terns. Com­bine the pat­terns to cre­ate cus­tom font load­ing be­hav­iour that works in all browsers.

This guide is not intended for use with font icons, which have different loading priorities and use cases. Also, SVG is probably a better long term choice.

You can lazy load your font. It’s 4 lines of JavaScript. 7 if you’re being ambitious.

Inspired by the recent work that Github and Medium have done to improve their fonts and thus the reading experience on their sites, we at got to thinking about our own long-established font choices.