photo by Bench Accounting
Have you ever noticed a website that the fonts seem to jump on the page? This is flash of unstyled text or FOUT. This is caused from how browsers render a page: progressively, prioritizing the raw content, then grabbing the stylesheet and then grabbing any external font files. The actual FOUT effect can be seen in the wild, but it varies by browser. FOUT sucks. So, what can you do?
Here is a helpful tip from Adobe:
Each browser handles loading web fonts in its own way. If a browser initially displays the text with a fallback font and then switches to the linked fonts after they’ve finished loading, you can get a flash of unstyled text or FOUT.
When fonts are loading, a class of .wf-loading is applied to the HTML element. Once the fonts have loaded, that class changes to .wf-active. So, you could add the following to your stylesheets:
.wf-loading h1 {/* styles to use while fonts are loading */}.wf-active h1 {/* styles to use after fonts have loaded */} |
You can then adjust your styles to make the FOUT less jarring; e.g., by making sure the flashed font and the loaded web font look to be the same size. Or, you could hide your text until the font is completely loaded. For example:
<style>.wf-loading h1 {font-family: "droid-sans";visibility: hidden;}.wf-active h1 {visibility: visible;}</style><body><h1>This headline will be hidden until Droid Sans is completely loaded.</h1></body> |
This Article is from Adobe Help written February 1, 2019