4 ms·

Yeah... I probably should have commented that earlier. If anyone wants to see an example of FOUT, you might be able to on my website with Chrome 50. I am curre

Yeah... I probably should have commented that earlier. If anyone wants to see an example of FOUT, you might be able to on my website with Chrome 50. I am currently experiencing this and then I found this bug report. Reload a few times if you don't see it at first. http://jakedeichert.com http://jakedeichert.com edit: FOUT usually means a fallback font is briefly shown before flickering and rendering a loaded web font. edit: As people have pointed out below, my situation likely has nothing to do with this possible bug. My website layout is very lightweight and Chrome is rendering it probably faster than the other browsers I tried which explains why I'm seeing FOUT more often in it. And yes, I'm loading my CSS asynchronously which is the main reason behind my FOUT.

paulirish 10y ago
You are using loadCSS to load the font from google fonts. loadCSS is designed to asynchronously load a stylesheet. Given an asynchronous load of the font, I'm not surprised you're seeing occasional FOUT. You should adopt the recommended <link> tag technique for your webfonts, unless you're willing to follow the more advanced font performance / FOUT guidance from Zach Leatherman.
- 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 ago
    When 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 ago
      Okay this is a logical explanation. I am probably wrong then.
  - panic 10y ago
    FWIW, I saw a flash of unstyled text on Safari for Mac.
    - cwyers 10y ago
      And I'm seeing it on Edge.

paulirish 10y ago

You are using loadCSS to load the font from google fonts. loadCSS is designed to asynchronously load a stylesheet. Given an asynchronous load of the font, I'm not surprised you're seeing occasional FOUT. You should adopt the recommended <link> tag technique for your webfonts, unless you're willing to follow the more advanced font performance / FOUT guidance from Zach Leatherman.

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 ago
  When 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 ago
    Okay this is a logical explanation. I am probably wrong then.
- panic 10y ago
  FWIW, I saw a flash of unstyled text on Safari for Mac.
  - cwyers 10y ago
    And I'm seeing it on Edge.