More than you ever wanted to know about font loading on the web (2021)
a year ago
- #performance optimization
- #Core Web Vitals
- #web fonts
- The post discusses the challenges of web font loading and its impact on Core Web Vitals, specifically Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).
- It recommends using `font-display: optional` to improve LCP and CLS by ensuring text renders quickly and avoids layout shifts.
- The post explains scenarios where `font-display: optional` may not be suitable, such as when no viable fallback font exists (e.g., icon fonts).
- It explores the use of `preload` with `font-display: optional`, noting potential trade-offs in bandwidth usage and performance.
- The post highlights changes in browser caching behavior, advising self-hosting fonts or their loading CSS to avoid cross-origin requests.
- A tool is introduced to automatically match fallback fonts to custom fonts, reducing layout shifts when custom fonts load.
- The post mentions new web standards like `size-adjust`, `ascent-override`, and `descent-override` for better font matching.
- A summary emphasizes combining `font-display: optional` with self-hosted CSS for optimal LCP and CLS, while new standards offer additional solutions.