Control web typography with CSS font display

Loading custom web fonts for the first time incurs a performance penalty on a web page. As web developers and designers, we always strive to create beautiful and performant websites. However, often these two goals clash. The CSS property font-display enables a better balance between aesthetics and performance. 

With font-display, you can give your browser hints about what font-loading strategy to use – for example, the importance of your web font, and how a system font fallback should be used in the case your web font download takes too long. You can add the font-display property to your @font-face rules.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Umar is a frontend web developer based in London, with a focus on writing tips, tutorials and documentation for the web platform.