Easy: don’t use them. They are a waste of time anyway. I promise you your users care 0% about whether your font is “just right” or not.
How to avoid layout shifts caused by web fonts
41–50 of 126 posts
Re: How to avoid layout shifts caused by web fonts
#42Easy: don’t use them. They are a waste of time anyway. I promise you your users care 0% about whether your font is “just right” or not.
It’s not about “just right”. It’s about branding.
Re: How to avoid layout shifts caused by web fonts
#43Re: How to avoid layout shifts caused by web fonts
#44Earlier quoted context omitted.
It’s not about “just right”. It’s about branding.
That’s just another thing your users don’t care about.
Spoken like a true hacker news user. Absolutely zero understanding outside of their field but still confidently parades their opinion.
Turns out that branding and consistency are actually very important.
Re: How to avoid layout shifts caused by web fonts
#45> 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!
And there is always someone on XP who complains your website looks like crap because their defaults look like crap while every other website bundled it’s own fonts and inputs.
Re: How to avoid layout shifts caused by web fonts
#46The suggestion I like the most is 3.4) Use system fonts : body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } Stack Overflow took this approach last year with the following font stack: [1] @ff-sans: system-ui, -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS "Segoe UI", // Windows "…
>Stack Overflow took this approach last year Just to note, what you posted below isn't their final version, and for good reasons. Anyone that is interested about this please check the original post with update 1,2, and 3. On the other hand, I still failed to see the the advantage of such complex stack vs font-family: sans-serif; Why reinvent the wheel when you can just use this and it would use browser's default sans…
There is something incomplete feeling about just the default styling. If you're going for a brutalist design mentality then sure, go for it, but sometimes the appearance actually does matter
Re: How to avoid layout shifts caused by web fonts
#47He forgot one: inline the font data (evil cackle). This made sense for me in conjunction with subsetting for a stopwatch app that only needs 10 digits and a colon. I submit it's not so bad if you inline it with the rest of your styling, at least that's cacheable separate from the content.
I’ve been meaning to build a PoC where you subset to the glyphs shown above the fold, inline, and then download the full font face at a low priority.
If fully automated, this would be quite slick.
Re: How to avoid layout shifts caused by web fonts
#48> 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.
Given freetype's long history of buffer overflows, I think disabling web fonts is a very good idea.
Re: How to avoid layout shifts caused by web fonts
#49Earlier quoted context omitted.
Design and art communicate. In fact, that's all they do. Fonts are associated with different periods of time, different groups of people, different artistic and even philosophical movements. Picking a font can help communicate how you see yourself and what you are trying to achieve. A picture paints a thousand words. A world without typography would be a poorer world.
Then why not share all typography with everyone under a license, that allows every OS maker to include all the fonts they want plus allowing users to choose what else to install and then only use system fonts? That way we can have it all, fast websites, without additional secret server side tracking, and the fonts of the system being used and the artist getting their message communicated. No need for any web font.
I guess there aren’t any commercial incentives to do that.
But that doesn’t change that typography is valuable.
Re: How to avoid layout shifts caused by web fonts
#50The suggestion I like the most is 3.4) Use system fonts : body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } Stack Overflow took this approach last year with the following font stack: [1] @ff-sans: system-ui, -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS "Segoe UI", // Windows "…
Why not just `body {font-family: sans-serif}`? Like, you don't have to explicitly enumerate all sans-serif system fonts ever. The browser will handle it.
Because they want to have a tighter control of user experience, which includes the choice of the font used to display text. So they list their preferred fonts first, with fallback fonts at the end.
It’s a fair reason with an appropriate CSS pattern.