Member-only story
Web fonts done right
How to properly configure web fonts, optimize for fast flicker-free rendering, and avoid tofu bloopers.
When using web fonts we must carefully avoid its hidden pitfalls. To do this designers, frontend developers, DevOps, and authors each have a role to play in creating a great end-user experience.
- Designers need to establish font stacks that can realistically be delivered to users over restricted bandwidths.
- Frontend developers need to pay attention to CSS rules that can speed things up.
- DevOps needs to make sure font files are fetched at the right time, and cached aggressively once downloaded.
- Content authors need to let everyone else on the team know about special glyphs and foreign language character sets that they use.
Here are some practical tips and strategies for getting fast accurate typography using real-world network bandwidths.
The @font-face rule
Let’s begin with a typical example. The designer chooses a typeface for their website articles with a careful eye for readability. The designer then declares the typeface, size, leading, white space, and color using CSS like this:
article {
font-family: 'Source Serif…