> Preloaded fonts delay main JS bundle
Am I crazy or does that waterfall pretty clearly show nothing of the sort? When using http/2, a reasonable amount of preloaded assets won’t block anything else in the critical path…
How to avoid layout shifts caused by web fonts
31–40 of 126 posts
Re: How to avoid layout shifts caused by web fonts
#32> Downloading one or two font files to render text won’t have a massive impact on speed, downloading five or ten font files will! I wonder why we almost never talk about the actual filesizes of different fonts and which ones take less space, for when the total size of our webpages is important and we'd like to make our font choices with that in mind, provided that we don't want to just use the system fonts for whatev…
Heh, if I serve custom Japanese fonts we happily go into the megabyte range.
That’s why you subset it when you have to use one. I’ve used CJK font subsets measured in single to double digit KBs in my own designs over the years, they’re fine. Don’t count on using a custom font for arbitrary text though.
Re: How to avoid layout shifts caused by web fonts
#33Earlier quoted context omitted.
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?
Yes, Microsoft does do a shit job at fonts. Many Android vendors too. Don’t even get me started on Linux.
> Don’t even get me started on Linux.
I'll bite. What's wrong with fonts on Linux?
Re: How to avoid layout shifts caused by web fonts
#34He 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.
Re: How to avoid layout shifts caused by web fonts
#35> 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.
And for that matter, let’s put the kibosh on the childish act of using colors as well
Re: How to avoid layout shifts caused by web fonts
#36The 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;
Re: How to avoid layout shifts caused by web fonts
#37The 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.
Re: How to avoid layout shifts caused by web fonts
#38> 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.
Designers want the web-app to look like their figma. Most are not willing to compromise on that. It takes senior engineers (with weight in the company) to lead the effort to force design to concede on certain things like this.
everything that I use computers for has been ultimately to produce aesthetics to my exacting standards a example of which is the 8 years taken from first sketch of my redesign for the company logo to first example of use. But I refuse to allow applications like Figma on my company computing assets. You probably wouldn't be hired if you used such things as part of your work flow anyway. Good design begins with pencil and paper and writing down the words describing what you are trying to accomplish. Art has its own internal function and architectural laws of physics and materials sciences. Great art is like cathedrals (of very well thought out bazaars) the culmination of not only one or more crucial leaders of the design, but the ecosystem of cultural heritage and interpretation and conversation and argument that you are communicating with the viewer. When your typical Figma dogmatic sees their font rendering to their knee jerk repulsion that's really being affronted to have their South Park Authority challenged, all I am seeing is the subtleties and nuances of a critic composition potentially becoming unstable rather in the manner a engineer sees weakening structures and worries about how long and effectively can the edifice perform it's intended task.
Re: How to avoid layout shifts caused by web fonts
#39Earlier quoted context omitted.
I still don’t see how picking a custom font over a default one contributed much to communication. Sure, the font need to be legable, clear destinction between letters all that stuff, but the system fonts is most likely better than a custom one for those things anyway.
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.
Re: How to avoid layout shifts caused by web fonts
#40I just disable webfonts by default myself. I wonder how common that is. I never felt that I missed anything, because let's face it: in 99% of the cases you jump on a website through search and leave it within 60 seconds. I make exceptions for websites that I visit regularly, where the most frequent breakage is a custom font that packs icons. On websites that I frequently read for documentation I sometimes even swap t…
> Designer's choice of fonts are frequently lower in legibility and/or do not have good hinting (not at the same level of most system fonts). On non-retina displays the qualitative difference is sometimes staggering.
This. Plus sometimes, for some reason, they choose hair-thin versions of fonts that are a pain to read even on (non mac) retina displays.