3 ms·
I just switched from using a blocking link tag to loadCSS today which indeed loads it asynchronously. I'd say 1/5 times I am not seeing FOUT. However I'm not s
by snake_case 10y ago
I just switched from using a blocking link tag to loadCSS today which indeed loads it asynchronously. I'd say 1/5 times I am not seeing FOUT.
However I'm not seeing FOUT on Safari for Mac and iOS and Firefox for Mac at the moment.
*edit: I definitely understand that you're right Paul. If the website loads slow, FOUT is expected. However, I'm seeing it more than what I expected to with loadCSS combined with this bug report I found. So I'm kind of leaning toward the idea that it is a bug in Chrome 50. If not, I'm wrong and it's only my loadCSS causing it.
- SimeVidas 10y agoWhen you load web fonts asynchronously, you’re allowing the browser to render the page without them. Since your site is very light, Chrome is able to perform the first render practically immediately (like within 100ms), so the FOUT is very noticeable. Btw, once the CSS `font-display` property becomes available, you’ll be able to control web font rendering to some extent, but as of now, this type of FOUT is the best approach, since, if you went with FOIT, you’d risk up to 3 seconds of whitespace in case your fonts experienced network congestion.
- snake_case 10y agoOkay this is a logical explanation. I am probably wrong then.
- panic 10y agoFWIW, I saw a flash of unstyled text on Safari for Mac.
- cwyers 10y agoAnd I'm seeing it on Edge.