Hacker News Reader

Comment by mananaysiempre | Hacker News Reader

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?

View on HN

> 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.

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).

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

(This is an intentionally bad fallback. If it were Georgia the effect would be a whole lot more subtle.)

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.

> 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/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

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.

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)

> 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.

I'd argue that's not "avoiding" but "minimizing". As in, the average shift will be by fewer pixels. The shift is still there; the two fonts will practically never match in size perfectly, causing e.g. word wrap to happen differently.

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

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.

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.

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.

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/

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.

This is also something the browser vendor could provide, without OS-level changes.

From 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.

Which system font? There’s no standards here;

Yes, there is:

   font-family: system-ui;

Just brainstorming here, why can't we have "browser fonts" shipped with the browsers?

There's serif, sans-serif, monospace,... That's more than enough to present any content.

Those fonts are not guaranteed to support OpenType features like small caps. This alone makes them inadequate for a lot of content.

Even better: we have OS fonts shipped with the OS, also users can install additional fonts for all the applications to use.

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).

I get Inter at 77kb but that includes 8 language versions of the site... or should it be less?

Or just use any of the font stacks from https://modernfontstacks.com/

I like custom fonts, but I must say I like this. Will use it on my blog.

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.

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.

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

>(now replaced by Tailwind)

Speak for yourself. Tailwind isn't universal.

Reply on news.ycombinator.com