Webfont optimization is a critical piece of the overall performance strategy. Each font is an additional resource, and some fonts may block rendering of the text, but just because the page is using webfonts doesn’t mean that it has to render slower. To the contrary, an optimized font, combined with a judicious strategy for how they are loaded and applied on the page can help reduce the total page size, and improve page rendering times.


Anatomy of a webfont
Defining font family with @font-face
Optimizing loading and rendering
Optimization checklist