5 ms·

This is an incidental annoyance, but I have to ask somewhere: why have we decided that the FOUC (“flash of unstyled content”) caused by laying out the page twic

This is an incidental annoyance, but I have to ask somewhere: why have we decided that the FOUC (“flash of unstyled content”) caused by laying out the page twice, once without and once with the fonts, is such a dire problem that it’s worth blocking the page’s first usable render behind a ~1MB resource? If memory serves, that decision is from before the twilight of the Web of documents, a time when div soup and inline styles (now replaced by Tailwind) were widely frowned upon. Why is it OK to leave a user on a slow or high-latency connection staring at a blank skeleton of a page, as though written in invisible ink, for several seconds? I still remember using Opera because it had a toggle for “cached images only”. What happened?

pitaj 1y ago
I think the best solution for this is to just not use webfonts, and in fact use the system font instead.
- Brajeshwar 1y ago
  I don’t have extensive experience on this yet, but I believe this is also a solved issue (using custom fonts). Serve the font-family from the same source as the website, preload only the primary font-style (say “normal”), and custom-pick the font to just the Latin subset. That should be fast enough that almost none will notice, except for the pedantic developers like us (personally, I can forgive that). Henceforth, let the others (styles, variable, etc) kick in as needed.
  - wonger_ 1y ago
    Yep, that's what I do on my website (except for the Latin subset). Still noticeable on spotty connections, like on a phone in a dead zone.
- Filligree 1y ago
  Which system font? There’s no standards here; each operating system has their own, with no guarantees as to what is available. Until OS developers get their house in order, designers will keep on ignoring them.
  - mananaysiempre 1y ago
    Partly, the answer is “tough”. As a designer, you don’t and aren’t meant to have pixel-level control over the screen contents. Web is not print. Don’t ask for the PostScript standard fourteen. (Somehow this lesson comes through much better for reflowable ebooks.) Partly, I am willing to admit that web fonts are still nice when you can get them. But they’re too unwieldy to block on (slow connections exist; font foundries are assholes[1]; etc.), and we don’t really have a solution (the problem with FOUC is not the unstyled content, it’s the layout shift). [1] https://jakearchibald.com/2021/f1-perf-part-1/ https://jakearchibald.com/2021/f1-perf-part-1/
    - luckylion 1y ago
      While I'm absolutely not a design-should-rule-all person, I think there's quite a range between "pixel-level control" and "you can't choose which font to use". If we'd reliably have the top 50 google fonts on every OS, there'd be a lot less webfonts used.
      - yencabulator 1y ago
        This is also something the browser vendor could provide, without OS-level changes.
  - mrec 1y ago
    From https://developer.mozilla.org/en-US/docs/Web/CSS/font-family https://developer.mozilla.org/en-US/docs/Web/CSS/font-family : system-ui Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.
  - reaperducer 1y ago
    Which system font? There’s no standards here; Yes, there is: font-family: system-ui;
- Vvector 1y ago
  Just brainstorming here, why can't we have "browser fonts" shipped with the browsers?
  - skydhash 1y ago
    There's serif, sans-serif, monospace,... That's more than enough to present any content.
    - xigoi 1y ago
      Those fonts are not guaranteed to support OpenType features like small caps. This alone makes them inadequate for a lot of content.
  - bmacho 1y ago
    Even better: we have OS fonts shipped with the OS, also users can install additional fonts for all the applications to use.
- valadaptive 1y ago
  You can also subset your fonts; e.g. if your content is in a language that uses the Latin alphabet, then you only need to include those characters in your font. Between that, variable fonts, and WOFF2, I've managed to get Inter down to 50kB (plus another 50 if you need real italics).
  - mediumsmart 1y ago
    I get Inter at 77kb but that includes 8 language versions of the site... or should it be less?
- Joeri 1y ago
  Or just use any of the font stacks from https://modernfontstacks.com/ https://modernfontstacks.com/
  - yoz-y 1y ago
    I like custom fonts, but I must say I like this. Will use it on my blog.
leptons 1y ago
>(now replaced by Tailwind) Speak for yourself. Tailwind isn't universal.
- deleted 1y ago
  [deleted]
esperent 1y ago
> why have we decided that the FOUC (“flash of unstyled content”) ... is such a dire problem I think the answer is that different people are sensitive to different things. I'll often come across articles going to great length to reduce some minor jank in animations or page load, and I'll be looking at it thinking yeah, I can see it, but it really doesn't bother me enough to fix. Certainly not by going to these lengths. Meanwhile, FOUC bothers me a lot, to the point where I can't understand that its accepted in any form. I'd much rather that I don't get shown the page at all until the real font is loaded. Otherwise my eye will have tracked to the text, started reading and then there's a jarring reflow and I lose my place and have to find it again. If I'm scanning for information through lots of websites, it does mentally tire me.
- saurik 1y ago
  I think there are different use cases, though; like, I agree with you that I find it really really annoying when I'm starting to read a paragraph of text... but, for the various buttons and navigation structure--even the headings--having them temporarily in the wrong font is a major win, as it lets me start to orient myself into the page (and might even help me get to my next nav point and out of the site before the font even bothers to load).
- systoll 1y ago
  Based on all this is does seem like there's a 'missing' option to only swap the fonts when they’re off-screen, which avoids: 1. blocking first-paint 2. 'flashes' of anything 3. Not showing the font at all. A quick mockup: https://codepen.io/pjwdev/pen/ByoLJoR https://codepen.io/pjwdev/pen/ByoLJoR (This is an intentionally bad fallback. If it were Georgia the effect would be a whole lot more subtle.)
  - yencabulator 1y ago
    Neat trick. For the sake of the demo, it's easier to visualize by putting a little background color in .offscreened Any layout change from the font changing off-screen still causes the scroll bar to jump around and change size.
dawnerd 1y ago
Leaving the page blank isn’t the solution but if you want to blame anyone blame Google. Everyone chases their web best practices that Google can’t even be bothered to follow. Maybe with ai killing search we can get back to building sites the right way.
seanwilson 1y ago
> why have we decided that the FOUC (“flash of unstyled content”) caused by laying out the page twice, once without and once with the fonts, is such a dire problem that it’s worth blocking the page’s first usable render behind a ~1MB resource? Why do you think that's a majority view? Google's page speed metric which they use as a SEO signal is followed by many webdevs and it very strongly encourages displaying text with system fonts while custom fonts load, and that the top of the page is displayed quickly: "Ensure text remains visible during webfont load ... Fonts are often large files with slow load times. Some browsers hide text until the font loads, causing a flash of invisible text (FOIT)." https://developer.chrome.com/docs/lighthouse/performance/font-display https://developer.chrome.com/docs/lighthouse/performance/fon... "First Contentful Paint (FCP) is an important, user-centric metric for measuring perceived load speed because it marks the first point in the page load timeline where the user can see anything on the screen—a fast FCP helps reassure the user that something is happening." https://web.dev/articles/fcp https://web.dev/articles/fcp If you hide the page content from displaying until custom fonts load and your header image loads for example, you'll likely get a red/unacceptable score.
- Culonavirus 1y ago
  Yea but the same POS company then tells you CLS bad mkaaaay... and guess what FOUC causes, layout shifts... (sorry, I got carried away with all the acronyms haha)
  - seanwilson 1y ago
    > tells you CLS bad mkaaaay... and guess what FOUC causes, layout shifts I haven't had a problem here (with layout shift). As long as you specify width + height of images in the HTML, and you don't have dynamic content pushing the layout about as it loads it in your page header, you'll likely get a high CLS score as it has some leeway. And sounds like `font-size-adjust` from the OP is helpful in avoiding layout shift when the stand-in font is swapped out for the custom font when it arrives? I haven't found this necessary though.
    - yencabulator 1y ago
efilife 1y ago
Why invisible link? You can display a fallback font when your main one is loading
wat10000 1y ago
I’d take this further: why have we decided that it’s acceptable to require a megabyte to be able to display the styled content at all? If custom fonts cause a major delay, don’t use them.
deleted 1y ago
[deleted]

pitaj 1y ago

I think the best solution for this is to just not use webfonts, and in fact use the system font instead.

Brajeshwar 1y ago
I don’t have extensive experience on this yet, but I believe this is also a solved issue (using custom fonts). Serve the font-family from the same source as the website, preload only the primary font-style (say “normal”), and custom-pick the font to just the Latin subset. That should be fast enough that almost none will notice, except for the pedantic developers like us (personally, I can forgive that). Henceforth, let the others (styles, variable, etc) kick in as needed.
- wonger_ 1y ago
  Yep, that's what I do on my website (except for the Latin subset). Still noticeable on spotty connections, like on a phone in a dead zone.
Filligree 1y ago
Which system font? There’s no standards here; each operating system has their own, with no guarantees as to what is available. Until OS developers get their house in order, designers will keep on ignoring them.
- mananaysiempre 1y ago
  Partly, the answer is “tough”. As a designer, you don’t and aren’t meant to have pixel-level control over the screen contents. Web is not print. Don’t ask for the PostScript standard fourteen. (Somehow this lesson comes through much better for reflowable ebooks.) Partly, I am willing to admit that web fonts are still nice when you can get them. But they’re too unwieldy to block on (slow connections exist; font foundries are assholes[1]; etc.), and we don’t really have a solution (the problem with FOUC is not the unstyled content, it’s the layout shift). [1] https://jakearchibald.com/2021/f1-perf-part-1/ https://jakearchibald.com/2021/f1-perf-part-1/
  - luckylion 1y ago
    While I'm absolutely not a design-should-rule-all person, I think there's quite a range between "pixel-level control" and "you can't choose which font to use". If we'd reliably have the top 50 google fonts on every OS, there'd be a lot less webfonts used.
    - yencabulator 1y ago
      This is also something the browser vendor could provide, without OS-level changes.
- mrec 1y ago
  From https://developer.mozilla.org/en-US/docs/Web/CSS/font-family https://developer.mozilla.org/en-US/docs/Web/CSS/font-family : system-ui Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.
- reaperducer 1y ago
  Which system font? There’s no standards here; Yes, there is: font-family: system-ui;
Vvector 1y ago
Just brainstorming here, why can't we have "browser fonts" shipped with the browsers?
- skydhash 1y ago
  There's serif, sans-serif, monospace,... That's more than enough to present any content.
  - xigoi 1y ago
    Those fonts are not guaranteed to support OpenType features like small caps. This alone makes them inadequate for a lot of content.
- bmacho 1y ago
  Even better: we have OS fonts shipped with the OS, also users can install additional fonts for all the applications to use.
valadaptive 1y ago
You can also subset your fonts; e.g. if your content is in a language that uses the Latin alphabet, then you only need to include those characters in your font. Between that, variable fonts, and WOFF2, I've managed to get Inter down to 50kB (plus another 50 if you need real italics).
- mediumsmart 1y ago
  I get Inter at 77kb but that includes 8 language versions of the site... or should it be less?
Joeri 1y ago
Or just use any of the font stacks from https://modernfontstacks.com/ https://modernfontstacks.com/
- yoz-y 1y ago
  I like custom fonts, but I must say I like this. Will use it on my blog.

leptons 1y ago

>(now replaced by Tailwind) Speak for yourself. Tailwind isn't universal.

deleted 1y ago
[deleted]

esperent 1y ago

> why have we decided that the FOUC (“flash of unstyled content”) ... is such a dire problem I think the answer is that different people are sensitive to different things. I'll often come across articles going to great length to reduce some minor jank in animations or page load, and I'll be looking at it thinking yeah, I can see it, but it really doesn't bother me enough to fix. Certainly not by going to these lengths. Meanwhile, FOUC bothers me a lot, to the point where I can't understand that its accepted in any form. I'd much rather that I don't get shown the page at all until the real font is loaded. Otherwise my eye will have tracked to the text, started reading and then there's a jarring reflow and I lose my place and have to find it again. If I'm scanning for information through lots of websites, it does mentally tire me.

saurik 1y ago
I think there are different use cases, though; like, I agree with you that I find it really really annoying when I'm starting to read a paragraph of text... but, for the various buttons and navigation structure--even the headings--having them temporarily in the wrong font is a major win, as it lets me start to orient myself into the page (and might even help me get to my next nav point and out of the site before the font even bothers to load).
systoll 1y ago
Based on all this is does seem like there's a 'missing' option to only swap the fonts when they’re off-screen, which avoids: 1. blocking first-paint 2. 'flashes' of anything 3. Not showing the font at all. A quick mockup: https://codepen.io/pjwdev/pen/ByoLJoR https://codepen.io/pjwdev/pen/ByoLJoR (This is an intentionally bad fallback. If it were Georgia the effect would be a whole lot more subtle.)
- yencabulator 1y ago
  Neat trick. For the sake of the demo, it's easier to visualize by putting a little background color in .offscreened Any layout change from the font changing off-screen still causes the scroll bar to jump around and change size.

dawnerd 1y ago

Leaving the page blank isn’t the solution but if you want to blame anyone blame Google. Everyone chases their web best practices that Google can’t even be bothered to follow. Maybe with ai killing search we can get back to building sites the right way.

seanwilson 1y ago

> why have we decided that the FOUC (“flash of unstyled content”) caused by laying out the page twice, once without and once with the fonts, is such a dire problem that it’s worth blocking the page’s first usable render behind a ~1MB resource? Why do you think that's a majority view? Google's page speed metric which they use as a SEO signal is followed by many webdevs and it very strongly encourages displaying text with system fonts while custom fonts load, and that the top of the page is displayed quickly: "Ensure text remains visible during webfont load ... Fonts are often large files with slow load times. Some browsers hide text until the font loads, causing a flash of invisible text (FOIT)." https://developer.chrome.com/docs/lighthouse/performance/font-display https://developer.chrome.com/docs/lighthouse/performance/fon... "First Contentful Paint (FCP) is an important, user-centric metric for measuring perceived load speed because it marks the first point in the page load timeline where the user can see anything on the screen—a fast FCP helps reassure the user that something is happening." https://web.dev/articles/fcp https://web.dev/articles/fcp If you hide the page content from displaying until custom fonts load and your header image loads for example, you'll likely get a red/unacceptable score.

Culonavirus 1y ago
Yea but the same POS company then tells you CLS bad mkaaaay... and guess what FOUC causes, layout shifts... (sorry, I got carried away with all the acronyms haha)
- seanwilson 1y ago
  > tells you CLS bad mkaaaay... and guess what FOUC causes, layout shifts I haven't had a problem here (with layout shift). As long as you specify width + height of images in the HTML, and you don't have dynamic content pushing the layout about as it loads it in your page header, you'll likely get a high CLS score as it has some leeway. And sounds like `font-size-adjust` from the OP is helpful in avoiding layout shift when the stand-in font is swapped out for the custom font when it arrives? I haven't found this necessary though.
  - yencabulator 1y ago

efilife 1y ago

Why invisible link? You can display a fallback font when your main one is loading

wat10000 1y ago

I’d take this further: why have we decided that it’s acceptable to require a megabyte to be able to display the styled content at all? If custom fonts cause a major delay, don’t use them.

deleted 1y ago

[deleted]