Avoid flash of invisible text - Githubissues

internetarchive / openlibrary

One webpage for every book ever published!

https://openlibrary.org

GNU Affero General Public License v3.0

5.2k stars 1.36k forks source link

Avoid flash of invisible text #3226

Open tabshaikh opened 4 years ago

tabshaikh commented 4 years ago

Fonts are often large files that take awhile to load. Some browsers hide text until the font loads, causing a flash of invisible text (FOIT).

Pages:

[ ] Homepage

Evidence / Screenshot (if possible)

Home Page delay:

Screenshot from 2020-03-20 19-13-33

Proposal & Constraints

Leverage the font-display CSS feature to ensure text is user-visible while web fonts are loading.

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers: https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools

Stakeholders

@tabshaikh

github-actions[bot] commented 9 months ago

Assignees removed automatically after 14 days.