Zach’s ugly mug (his face)

Zach Leatherman

Better @font-face with Font Load Events on Dev.Opera

September 26, 2014

Read Better @font-face with Font Load Events on Dev.Opera.

@font-face is an established staple in the diet of almost half of the web. According to the HTTP Archive, 47% of web sites make a request for at least one custom web font. What does this mean for a casual browser of the web? In this article, I make the argument that current implementations of @font-face are actually harmful to the performance and usability of the web. These problems are exacerbated by the fact that developers have started using @font-face for two completely different use cases: content fonts and icon fonts, which should be handled differently. But there is hope. We can make small changes to how these fonts load to mitigate those drawbacks and make the web work better for everyone.

Zach’s ugly mug (his face)

Zach is a builder for the web. He created IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator now full-time sponsored by IndieWeb Avatar for https://www.netlify.comNetlify. At one point he became entirely too fixated on web fonts. He has given 62 talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. Formerly part of Filament Group, NEJS CONF, and NebraskaJS. Read more about Zach »

Previous
A Font Family Reunion
Next
The Perfect GIF

Shamelessly plug your related post:

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)