search

pressbooks / ideas

Ideas for Pressbooks.
GNU General Public License v3.0
12 stars 4 forks source link

Ensure Text Remains Visible During Webfont Load #355

Open colomet opened 3 years ago

colomet commented 3 years ago

Feature Description

add font-display: swap in your @font-face style to avoid FOIT.

Feature Use Case

Fonts are usually large files and take a lot of time to load.

There’s a reason why Google flags this behavior. Some browsers won’t render text until all the fonts are loaded. This causes what’s known as Flash of Invisible Text (FOIT).

You can fix this by forcing the browser to temporarily show a system font while the custom fonts load.

Other Notes

https://wp-rocket.me/blog/improving-first-contentful-paint/ https://web.dev/font-display/

SteelWagstaff commented 3 years ago

@colomet This is a good idea -- thank you for the suggestion!