How to avoid layout shifts caused by web fonts
simonhearne.com
How to avoid layout shifts caused by web fonts
1–10 of 126 posts
Re: How to avoid layout shifts caused by web fonts
#2> Most designers will cringe at the thought of showing users a fallback system font.
Explaining them that web is not paper, helps removing a lot of this childish behaviour.
Re: How to avoid layout shifts caused by web fonts
#3> Most designers will cringe at the thought of showing users a fallback system font. Explaining them that web is not paper, helps removing a lot of this childish behaviour.
Except it doesn't. The usual fallback I've experienced (been told to do) to this is to preload the whole site behind a loading bar instead :)
Re: How to avoid layout shifts caused by web fonts
#4> Most designers will cringe at the thought of showing users a fallback system font. Explaining them that web is not paper, helps removing a lot of this childish behaviour.
I’m sure there’s a few exception, but why do anyone care about which font is used as long as the basics such as fixed or sans serif is applied correctly?
The answer is most likely branding, but I don’t recall landing on a company website and going: “That’s not the font from their design guidelines. This is unacceptable, I shall take my business elsewhere”
All this tweaking and hacking font loading is a vaste of time.
Re: How to avoid layout shifts caused by web fonts
#5> Most designers will cringe at the thought of showing users a fallback system font. Explaining them that web is not paper, helps removing a lot of this childish behaviour.
Except it doesn't. The usual fallback I've experienced (been told to do) to this is to preload the whole site behind a loading bar instead :)
I was told so recently. But it wasn't even for the font loading. It was to load the animated transition to transit from nothing to the entry page.
So to instead of dropping (or at least thinking about optimizing) the loading transition the designer (with a straight face) proposed a loading bar for the loading of the loading animation.
I was lost for words.
[Edit: typo]
Re: How to avoid layout shifts caused by web fonts
#6> Most designers will cringe at the thought of showing users a fallback system font. Explaining them that web is not paper, helps removing a lot of this childish behaviour.
I’m sure there’s a few exception, but why do anyone care about which font is used as long as the basics such as fixed or sans serif is applied correctly? The answer is most likely branding, but I don’t recall landing on a company website and going: “That’s not the font from their design guidelines. This is unacceptable, I shall take my business elsewhere” All this tweaking and hacking font loading is a vaste of time.
I gather from your comment that you don’t do frontend. I don’t either. I also think it’s a waste of time. But I think you and I are not the intended audience. I think frontend people are trying to design an experience for users. The same way you or I might be designing an architecture for the system. They want it to look and feel a certain way in order to provoke a response.
Re: How to avoid layout shifts caused by web fonts
#7> Most designers will cringe at the thought of showing users a fallback system font. Explaining them that web is not paper, helps removing a lot of this childish behaviour.
I guess it's a good thing the web is built for users rather than designers, then, isn't it? Oh wait.
On a more serious note, screw all the font **ery. Settings → Language and Appearance → Advanced → untick Allow pages to choose their own fonts, instead of your selections above. Better to have some crappy websites glitch out a bit than get a headache from trying to read 200 different fonts in a day.
Re: How to avoid layout shifts caused by web fonts
#8> Most designers will cringe at the thought of showing users a fallback system font. Explaining them that web is not paper, helps removing a lot of this childish behaviour.
I’m sure there’s a few exception, but why do anyone care about which font is used as long as the basics such as fixed or sans serif is applied correctly? The answer is most likely branding, but I don’t recall landing on a company website and going: “That’s not the font from their design guidelines. This is unacceptable, I shall take my business elsewhere” All this tweaking and hacking font loading is a vaste of time.
Branding is bit subtler than that — you’re not going to really say anything about Target’s consistent styling, versus Walmart’s fairly austere aesthetic, but you definitely get a different “feel” from each, before looking at their actual contents/stock.
I don’t know whether fonts are really that important to the total equation, but “not terrible enough to walk out the door” is generally a very low bar to meet when designing a thing.
Another example in the app space — you know enterprise apps will get the job done, but they’re downright unpleasant to use; from aesthetics to workflow efficiency, they just barely hover over “dealing with it isn’t worth the output”. But that’s generally not where you want things to sit as a design goal.
Re: How to avoid layout shifts caused by web fonts
#9> Most designers will cringe at the thought of showing users a fallback system font. Explaining them that web is not paper, helps removing a lot of this childish behaviour.
I do think that sites should strive to "just work" with nice system fonts (and respect user agent settings), but this is just an obtuse answer.
You can ship your own fonts. Everyone and their dog uses one of two web browser engines. People want their websites to "look right". You can offer a fully specified look!
Re: How to avoid layout shifts caused by web fonts
#10> Most designers will cringe at the thought of showing users a fallback system font. Explaining them that web is not paper, helps removing a lot of this childish behaviour.
i have tried to ask people a simple question. "why do you think you know fonts better than microsoft or apple?" not to even talk about linux for a moment here. do these multi trillion dollar companies making operating systems do a shit job at fonts that each and every website developer needs to use google fonts that increase dependency on third parties than using system default fonts?