Change FOUT back to FOIT #917
Conversation
The fonts loaded in 0.4.3 did not have a configuration for the CSS `font-display`, and they were switched to `font-display: swap` in 0.5.0rc1. The old behavior was FOIT, and `swap` changed the behavior to FOUT, which was more noticeable. This changes back to a long block period while the fonts are loading. For more information on the FOUT/FOIT and the font-display mechanism: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
| @@ -66,4 +66,4 @@ $custom-font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia | |||
| $custom-font-family2: Georgia, serif | |||
| $code-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier, monospace | |||
|
|
|||
| $font-display: swap | |||
| $font-display: block | |||
There was a problem hiding this comment.
I wonder if we might try fallback here:
fallback: Acts as a compromise between the auto and swap values. The browser will hide the text for about 100ms and, if the font has not yet been downloaded, will use the fallback text. It will swap to the new font after it is downloaded, but only during a short swap period (probably 3 seconds).
It seems like it might be a better experience for folks with really slow connections, since the font won't change after they start reading the page. I don't feel strongly tho.
There was a problem hiding this comment.
fallback has it's own issues. You'll still see the unstyled text flash, as the block period is short, and then if the fonts don't load in the swap period, the unstyled text will stick around without ever showing the downloaded fonts -- and the downloaded fonts are still transferred, just never used.
The fonts loaded in 0.4.3 did not have a configuration for the CSS
font-display, and they were switched tofont-display: swapin0.5.0rc1. The old behavior was FOIT, and
swapchanged the behavior toFOUT, which was more noticeable. This changes back to a long block
period while the fonts are loading.
For more information on the FOUT/FOIT and the font-display mechanism:
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
Fixes #913