FOUT
Apart from using system fonts, is there any way in 2024 to avoid FOUT while keeping Lighthouse happy?
Inline SVG fonts subsetted for the critical content, maybe (so that the font initially used e.g. for the header's title only contains the dozen or so characters of the title) ?
19 Replies
Or actually just render the title as SVG instead of text (+ aria-label) ? But then it won't wrap, so I guess SVG fonts are better…
Then the content uses the chain
<final web font>, <inline subsetted svg font for critical content only>, <fallbacks…>there is a way: it's called "critical styles", "critical style path", "critical above-the-fold styles" or "above-the-fold styles"
basically, the idea is to have a small chunk of css that styles the basic content at the top of the page - the visible part
layouting and borders and other things that change how the elements are positioned are good candidates for this
things like colors on hover and other effects are best left for the big css
But even using inline css for all the above-the-fold content, web fonts load asynchronously, no?
who cares?
I've inlined all my stylesheets and FOUT happens.
just put
font-display: swap and that's itYes,
font-display: swap == FOUT
I'm asking exactly how to avoid that.set a decent fallback that the system has
you can't do much more than this
All good advice found everywhere but not helping with my question.
you can try to preload the font
and have good caching
the first time will always be funky, but that's as far as you can get
preloading, using
expect or any other form of render blocking is bad for performance.it will always happen, at least once
what?
I believe it doesn't have to. Using the subset inline SVG font technique in my original post for instance avoids FOUT completely while not render-blocking
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload <-- im talking about this
i can see it working, but can see the html getting really fat as well
for a dozen glyphs used by a heading?
use emojis
if you can
I asked a simple technical question and you're here trolling me. you have nothing better to do?
yes, i have others to help
don't mind me, then