Live data from Hacker News

How to avoid layout shifts caused by web fonts

simonhearne.com

91–100 of 126 posts

Re: How to avoid layout shifts caused by web fonts

#91
post #78

Earlier quoted context omitted.

Normal way to achieve img to have a size before the resource in src loads is to set width/height attributes to the native size of the resource that will be loaded (because you have to tell the browser size of an image somehow), and if you want to scale it with aspect ratio preserved you just use min/max-width/height in css to fit it to whatever size you need.

You’d think, right? But I tried that approach, and I don’t remember what the issues were but there were problems. Unless I was doing something wrong. Either way, yes, you need the dimensions ahead of time, which is reasonable and not my gripe.

> Unless I was doing something wrong

Probably this, that approach is very standardized now across the major browsers.

I worked at a web agency until last year, and led projects to inline image height/width values for 4 large companies. Huge reduction in CLS and permits you to lazyload without fear of layout shifts.

`aspect-ratio` hadn't landed in iOS Safari at that point, but you can do that instead now. Identical behavior.

Re: How to avoid layout shifts caused by web fonts

#92
post #64

Earlier quoted context omitted.

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.

You could inline a dummy font containing only the font metrics. Then replace it by the real font after the initial render.

That also sounds interesting! My goal is to have the characters visible on the first render, whereas that sounds like the glyphs would be invisible – albeit accurately sized, and therefore preventing layout shifts. Correct me if I'm wrong :)

Re: How to avoid layout shifts caused by web fonts

#93
post #30

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

Adobe Fonts does a pretty crazy thing for East Asian fonts where they stream glyphs on demand to the page: https://helpx.adobe.com/fonts/using/dynamic-subsetting.html

I've been keeping an eye out to see if there's been an equivalent FOSS solution but nada so far.

Re: How to avoid layout shifts caused by web fonts

#94
post #9

Earlier quoted context omitted.

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.

Yea, windows XP has to be supported, sure. But then suddenly drop support for firefox because no one uses that.

Meh.

Re: How to avoid layout shifts caused by web fonts

#95

The 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 "…

I am a firm believer in this and just using built in fonts in general. Users really don't care about fonts, they really don't. And if you really need a specific font for say a logo, use an SVG with the text converted to paths. But of course only do that in image type situations and provide alt text.

Re: How to avoid layout shifts caused by web fonts

#96
post #80
post #64

Earlier quoted context omitted.

You could inline a dummy font containing only the font metrics. Then replace it by the real font after the initial render.

I was going to suggest that too. Separate metrics files have already been done too (both with TeX in TFM files and Adobe/PostScript fonts in AFM/PFM files), so you wouldn't even have to invent a new file format. Or you could simply use a regular font with no glyph curve data. I am a bit disappointed this is not covered in the original post, and that no effort is being put in W3C to make that easy and viable.

> I am a bit disappointed this is not covered in the original post, and that no effort is being put in W3C to make that easy and viable.

Yes. What would be interesting is if you could use an a-priori available font (system font), and combine it with a website-provided font metrics file. That way, you can render visible text immediately, and then later render the correct font without layout change.

Re: How to avoid layout shifts caused by web fonts

#97

The 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 "…

No post body was provided.

Re: How to avoid layout shifts caused by web fonts

#98
post #26
post #13

Earlier quoted context omitted.

Yes, Microsoft does do a shit job at fonts. Many Android vendors too. Don’t even get me started on Linux.

I love my linux fonts, there's nothing wrong with them. You must be out of touch with reality.

I don't know the technical details of font implementations. But I do know on my low ppi monitor, Ubuntu fonts look far better than both Windows and MacOS.

Re: How to avoid layout shifts caused by web fonts

#99
post #13

Earlier quoted context omitted.

Yes, Microsoft does do a shit job at fonts. Many Android vendors too. Don’t even get me started on Linux.

cool. why don't you kindly ask them to fix the fonts by a bug request instead of everyone just assuming the stuff is shit

How productive do you think it would be to open a bug report with Microsoft telling them that Segoe UI/Arial/etc. are hideous? Do you think they will change them for me and/or license some good looking fonts to bundle with Windows?

Complaining and not using them is the only real option.

Re: How to avoid layout shifts caused by web fonts

#100
post #59

How to avoid layout shifts caused by CSS loading. How to avoid layout shifts caused by images. How to avoid layout shifts caused by ads. How to avoid layout shifts caused by DOM changes. It is funny how as many things moved to web we still have those basic issues, that would be considered show stopper errors in a desktop app. Sometimes I would like for the browser to keep the state from 0.2 second ago when I decided…

>How to avoid layout shifts caused by ads.

Not sure this one counts as a bug, but a deliberate WONTFIX. I never intentionally click on ads, but I have been known to press one when an ad "happened" to appear in the position of some other content.

Post reply on HN