Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to avoid layout shifts caused by web fonts

simonhearne.com

Post reply on HN
Print view View original

121–126 of 126 posts

Re: How to avoid layout shifts caused by web fonts

#121

Post by Aeolun »

lelandfe wrote: post #93
Aeolun wrote: post #30

Earlier quoted context omitted.

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.

Yeah, this is fantastic if you want constantly blinking text.

We used adobe fonts for a while, but I really wasn’t impressed.

Hundreds of dollars to buy a font it turned out we could only use through their hosted service.

Re: How to avoid layout shifts caused by web fonts

#122

Post by Aeolun »

oefrha wrote: post #32
Aeolun wrote: post #30

Earlier quoted context omitted.

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.

Lol, the website is in Japanese :) I can hardly have half of the characters someone types revert back to the system font (though I imagine it would look really funny).

Re: How to avoid layout shifts caused by web fonts

#123

Post by iforgotpassword »

l0b0 wrote: post #115
iforgotpassword wrote: post #56

Earlier quoted context omitted.

I switched to using ublock origin to do that, since I can quickly add an exception for a site. Some sites use fonts for icons. Most of them are still usable but just look a bit silly, but sometimes it's annoying to the point that I want to add an exception.

Let's see if I get this right: (0. Install uBlock Origin) 1. Re-enable web fonts 2. In the main UO settings, check "Block remote fonts"? 3. Refresh a page 4. Click the UO icon, and then "more" until I see an icon titled "Click to no longer block remote fonts on this site" 5. Click 6. Refresh the page Repeat 4-6 for relevant sites. Any caveats?

Yep that's how I so that, although in step 4 I don't have to click "more", I immediately have an icon with a capital A that toggles fonts at the bottom. But maybe I configured it to automatically expand something that is by default hidden behind a more button... I honestly don't remember.

Re: How to avoid layout shifts caused by web fonts

#124

Post by account42 »

jurnalanas wrote: post #25

You can use a library to take care a lot of FOUT versus FOIT experience. Face Observer ( https://fontfaceobserver.com ) lets you wait for the web fonts to load, then responds accordingly. var html = document.documentElement; var script = document.createElement("script"); script.src = "fontfaceobserver.js"; script.async = true; script.onload = function () { var roboto = new FontFaceObserver("Roboto"); var sansita = ne…

If you do this please make sure to not hide things when scripts are disabled.

Re: How to avoid layout shifts caused by web fonts

#125

Post by l0b0 »

iforgotpassword wrote: post #123
l0b0 wrote: post #115

Earlier quoted context omitted.

Let's see if I get this right: (0. Install uBlock Origin) 1. Re-enable web fonts 2. In the main UO settings, check "Block remote fonts"? 3. Refresh a page 4. Click the UO icon, and then "more" until I see an icon titled "Click to no longer block remote fonts on this site" 5. Click 6. Refresh the page Repeat 4-6 for relevant sites. Any caveats?

Yep that's how I so that, although in step 4 I don't have to click "more", I immediately have an icon with a capital A that toggles fonts at the bottom. But maybe I configured it to automatically expand something that is by default hidden behind a more button... I honestly don't remember.

Oh, also, I have to remember to click the "Save" button, otherwise it resets when I restart Firefox.

Re: How to avoid layout shifts caused by web fonts

#126

Post by megous »

dmitryminkovsky wrote: post #82
megous wrote: 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.

Well, if you set max-width: something for example. You need to set other dimension as auto in CSS. So that would be height: auto.
Post reply on HN