- 🚥start important font downloads earlier
(Start a Web Font Load)
Web fonts don’t start downloading until they’re found to be used in content, so it’s often late in the page load. We need to tell the browser to start downloading our high priority web fonts sooner.
- Strategy: Use preload
- 🏎️Prioritize Readable Text
(Behavior while a Web Font is loading)
This means absolutely no invisible text. This is known as the flash of invisible text, or FOIT. We can use flash of unstyled text (FOUT) strategies to prioritize system fonts during web font load.
Strategy: Use font-display
Strategy: Use the CSS Font Loading API
- 🐢🐰Make Fonts Smaller
(Reduce Web Font load time)
Guess what: Smaller file downloads finish sooner.
Strategy: Use WOFF2 formats (compression built in)
Strategy: Subset your fonts, if language and licensing requirements allow
Check out Glyhhanger to help with both of these strategies
- 🚩Reduce Movement During Page Load
(Behavior after a Web Font has Loaded)
Each independent @font-face
block has its own loading life-cycle. Its own FOIT, its own FOUT, its own repaint and reflow. When using two or more web fonts for a single family, its important to group the repaints together to reduce reflow of text on your page.
Strategy: Use the CSS Font Loading API to group your repaints.
Strategy: Use Variables fonts (Browser support at Can I Use: Variable Fonts)