A photo of Stephen Meriwether

Stephen Meriwether

April 14, 2021

How to think about CSS font-display

Web font performance is often overlooked, but can have a real impact on your website’s user experience and performance. One of the best controls available to us is the CSS font-display property. Using it, we’re able to tell the browser how we’d like it to render our web fonts.

font-display

Even with those definitions it can be difficult to decide what to do with the web fonts on your website. Instead of thinking about how fonts are rendered, I’ve found it helpful to think about what my design requires or how critical are the fonts to the experience of my website. With this framing, I have different names to the font-display values.

How I think about font-display

Using this language, I’m able to more quickly decide what font-display value to use. I’d encourage you to use this language yourself, and then let me know if it helps!