A hands-on look at how to measure web font latencies and optimize their use: transfer latencies, time of initial fetch, and interaction with the critical rendering path.
Optimizing web fonts with Font Load Events API
Finally, we come to the most exciting part of this entire story: Font Load Events API. In a nutshell, this API will allow us to manage and define how and when the fonts are loaded – we can schedule font downloads at will, we can specify how and when the font will be rendered, and more. If you're familiar with the Web Font Loader JS library, then think of this API as that and more but implemented natively in the browser:
var font = new FontFace("FontA", "url(http://mysite.com/fonts/fontA.woff)", {}); font.ready().then(function() { // font loaded.. swap in the text / define own behavior. }); font.load(); // initiate immediate fetch / don't block on render tree!
...
Web font performance checklist
Web fonts offer a lot of benefits: improved readability, accessibility (searchable, selectable, zoomable), branding, and when done well, beautiful results. It's not a question of if web fonts should be used, but how to optimize their use. To that end, a quick performance checklist:
- Audit your font usage and keep it lean.
- Make sure font resources are optimized - see Google Web Fonts tricks.
- Instrument your font resources with Resource Timing: measure → optimize.
- Optimize the transfer latency and time of initial fetch for each font.
- Optimize your critical rendering path, eliminate unnecessary JS, etc.
- Spend some time playing with the Font Load Events API.