Build resilient systems at scale
October 12–14, 2015 • New York, NY

The performance and usability of web fonts

Zach Leatherman (Filament Group)
2:10pm–2:50pm Tuesday, 10/13/2015
Location: Nassau Suite
Average rating: ***..
(3.80, 5 ratings)
Slides:   external link

Prerequisite Knowledge

Basic knowledge of what web fonts are and basic knowledge of CSS and JavaScript.

Description

@font-face is an established staple in the diet of almost half the web. According to the HTTP Archive, 57% 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 integrity of content on 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 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 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 Smashing Conference, Velocity, CSSConf, and the White House. He also herds NebraskaJS (a JavaScript meetup) and its eponymously named NebraskaJS Conference. He previously held the title of user interface architect for Union Pacific Railroad.

Stay Connected

Follow Velocity on Twitter Facebook Group Google+ LinkedIn Group

Videos

More Videos »

O’Reilly Media

Tech insight, analysis, and research