zachleat’s Ugly Mug

Zach Leatherman

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

26 September 2014 Read in less than 1 minute

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.