@font-face is an established staple in the diet of almost half the web. According to the HTTP Archive, 47% of websites make a request for at least one custom web font, and the page weight of these fonts is only growing.
In this talk, we’ll discuss why current implementations of @font-face are actually harmful to the performance and usability of the web. Hiding the fallback text while the font is loading means the content will be unreadable until the font loads. Some browsers have implemented a three-second timeout on font requests; but one performance survey has stated that 57% of users abandon a site if it’s not usable in three seconds.
High latency cellular networks and use of multiple fonts can mean disjointed repaints and reflows, which can cause serious damage to the usability and fidelity of your content. These problems are exacerbated when @font-face is used for both content fonts and icon fonts, which need to be handled differently.
But there is hope. The CSS Font Loading API is currently expanding its browser support base and can be used today with polyfills. Or embed your font files as data URIs in an asynchronously-loaded stylesheet. Another exciting proposal is the CSS font-rendering property.
We can use these approaches to make small changes to how these fonts load to mitigate our drawbacks and make the web work better for everyone.
Zach Leatherman is a front end engineer with Filament Group. He has given talks at conferences like CSSConf and Smashing Conference. He also herds NebraskaJS, a JavaScript meetup. He previously held the title of User Interface Architect for Union Pacific Railroad.
Comments on this page are now closed.
For exhibition and sponsorship opportunities, contact Gloria Lombardo at glombardo@oreilly.com
For information on trade opportunities with O'Reilly conferences, email partners@oreilly.com
View a complete list of Velocity contacts
Comments
Slides are available here
Slides are available here: https://speakerdeck.com/zachleat/the-performance-and-usability-of-font-loading
I think we need to know our sample size before we make any judgment there :D
Also, hello!
I’d like Zach to address the existence of more than one Leatherman in the software performance space. It seems statistically significant to me.