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.

via Control web typography with CSS font display | Creative Bloq.