@font-face is an established staple in the diet of more than half of the web. 54% of the top 1000 websites use web fonts 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 performance surveys have found that many users abandon a site if it’s not usable in three seconds. Mixing 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.
We’ll discuss small changes we can make to escape the pitfalls of default font loading and mitigate these drawbacks to make the web work better for everyone.