Hacker News Reader

Comment by usrn | Hacker News Reader

It's custom fonts that don't share metrics with built in fonts. If they don't do that the page content jumps around when the fonts load. Custom fonts were a terrible idea, I wish browsers would just drop support for them.

EDIT: Unless there's a way to include metrics outside the font there really isn't a way to prevent reflows when it loads other than blanking the entire page until then.

View on HN

If sites don’t specify image dimensions, the page content jumps around when the images load. Images were a terrible idea, I wish browsers would just drop support for them.

(There are many ways to avoid reflows with font loading, eg font-display: optional)

The solution to this is to simply not display anything while the page loads.

s/page/font, which is what `font-display: optional` does, sort of. There's a 100ms blank grace period, and if the font's not ready by then it uses the fallback font. (It'll still load, and be ready in cache for the next page visit)

So here you get the worst of both on a slow connection.

- The page takes an extra 100ms to load

- ~ a minute later (when you're halfway through reading it) the content will jump by some large amount.

There isn't a nice way to do custom fonts on the web and you should just avoid them.

Sorry, no part of your comment is true. This is easily the best option for slow connection/device users, and it comes at the expense of the design.

> The page takes an extra 100ms to load

Nope. Slow connections' floor for first paint is 100ms when using `font-display: optional` – not an additional 100ms. The page is still loading like normal in this period. (If you're already under a 100ms FCP for 3G users, you know all of this already)

> the content will jump by some large amount

`font-display: optional` is literally designed to prevent this from ever occurring. Either the font is ready for first paint in 100ms, or another font is used.

Is there a setting or extension that just uses the closest available system font and blocks the remote API?

The "closest available system font" is determined by the font names in a site's stylesheets, not by magic.

There is no way that a browser could figure out what the "closest available" system font is, or that one even exists. It's up to the designer to specify the font(s) to be used.

You can disable 3rd party fonts.

On Firefox, this is as simple as going to about:config and setting gfx.downloadable_fonts.enabled to false.

On Chrome, it requires adding the flag --disable-remote-fonts to however you're opening it.

This breaks a lot of sites that use custom fonts as compressed replacements for monochrome SVGs.

Those sites are already broken for accessibility.

Reply on news.ycombinator.com