PUBLIC MARKS from srcmax with tag "font face"

This article discusses performance best practices for fonts. There are a variety of ways in which web fonts impact performance: Delayed text rendering: If a web font has not loaded, browsers typically delay text rendering. In many situations, this delays First Contentful Paint (FCP). In some situations, this delays Largest Contentful Paint (LCP). Layout shifts: The practice of font swapping has the potential to cause layout shifts and so impact Cumulative Layout Shift (CLS). These layout shifts occur when a web font and its fallback font take up different amounts of space on the page.

When I look back at the last four years that I’ve spent learning everything I could about web fonts and how web fonts load, I can distill it all down to a small checklist of ideals that I continue to chase.

This demo was created to show the functional differences between FOIT and FOUT. It’s using Open Sans loaded from Google Web Fonts