Build resilient systems at scale
May 27–29, 2015 • Santa Clara, CA

The performance and usability of font loading

Zach Leatherman (Filament Group)
11:50am–12:30pm Thursday, 05/28/2015
Location: Mission City M1-2
Average rating: ****.
(4.62, 8 ratings)
Slides:   external link

Prerequisite Knowledge

A little experience with the @font-face syntax and use for web fonts is helpful, but not completely necessary.

Description

@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.

Photo of Zach Leatherman

Zach Leatherman

Filament Group

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.

Comments

Picture of Zach Leatherman
Zach Leatherman
05/28/2015 3:59pm PDT
Picture of Zach Leatherman
Zach Leatherman
05/28/2015 3:58pm PDT

Slides are available here: https://speakerdeck.com/zachleat/the-performance-and-usability-of-font-loading

Picture of Zach Leatherman
Zach Leatherman
04/24/2015 8:51am PDT

I think we need to know our sample size before we make any judgment there :D

Also, hello!

Picture of James Leatherman
James Leatherman
04/23/2015 11:18pm PDT

I’d like Zach to address the existence of more than one Leatherman in the software performance space. It seems statistically significant to me.