Company
Date Published
Author
Lazar Nikolov
Word count
2021
Language
English
Hacker News points
None

Summary

The use of web fonts can cause cumulative layout shifts (CLS), which negatively impact user experience. To minimize CLS, it's recommended to avoid using web fonts or use built-in fonts instead. If web fonts are necessary, consider using fewer font files, variable-size fonts, hosting your own fonts, and the `font-display` property with a fine-tuned fallback font. The `font-display` property can be set to various values, including `swap`, which ensures that the user sees a visible fallback font while the correct font is loading, or `fallback`, which hides the text for 100ms before showing the fallback font. Using performance monitoring tools like Sentry can help track CLS scores in production and identify areas for improvement.