The Font Loading Checklist

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. Our goal as web developers is to maximize the experience and raise user expectations to the level of what the web is capable of delivering, but also to manage our performance budgets to ensure that we are fulfilling the promise of the web—it’s ubiquity. This checklist should help you deliver on those two often competing ideals.

The Font Loading Checklist #

#

(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.

#

(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.

#

(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 Glyphhanger to help with both of these strategies.

#

(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.

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. Our goal as web developers is to maximize the experience and raise user expectations to the level of what the web is capable of delivering, but also to manage our performance budgets to ensure that we are fulfilling the promise of the web—it’s ubiquity. This checklist should help you deliver on those two often competing ideals.

The Font Loading Checklist #

#

(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.

#

(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.

#

(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 Glyphhanger to help with both of these strategies.

#

(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.


Print Share Comment Cite Upload Translate
APA
Zach Leatherman | Sciencx (2024-03-28T08:58:13+00:00) » The Font Loading Checklist. Retrieved from https://www.scien.cx/2018/08/30/the-font-loading-checklist/.
MLA
" » The Font Loading Checklist." Zach Leatherman | Sciencx - Thursday August 30, 2018, https://www.scien.cx/2018/08/30/the-font-loading-checklist/
HARVARD
Zach Leatherman | Sciencx Thursday August 30, 2018 » The Font Loading Checklist., viewed 2024-03-28T08:58:13+00:00,<https://www.scien.cx/2018/08/30/the-font-loading-checklist/>
VANCOUVER
Zach Leatherman | Sciencx - » The Font Loading Checklist. [Internet]. [Accessed 2024-03-28T08:58:13+00:00]. Available from: https://www.scien.cx/2018/08/30/the-font-loading-checklist/
CHICAGO
" » The Font Loading Checklist." Zach Leatherman | Sciencx - Accessed 2024-03-28T08:58:13+00:00. https://www.scien.cx/2018/08/30/the-font-loading-checklist/
IEEE
" » The Font Loading Checklist." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2018/08/30/the-font-loading-checklist/. [Accessed: 2024-03-28T08:58:13+00:00]
rf:citation
» The Font Loading Checklist | Zach Leatherman | Sciencx | https://www.scien.cx/2018/08/30/the-font-loading-checklist/ | 2024-03-28T08:58:13+00:00
https://github.com/addpipe/simple-recorderjs-demo