5 ms·

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 ter

by usrn 4y ago

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.

aqfamnzc 4y ago
Is there a setting or extension that just uses the closest available system font and blocks the remote API?
- HelloNurse 4y ago
  The "closest available system font" is determined by the font names in a site's stylesheets, not by magic.
- jaywalk 4y ago
  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.
- shakna 4y ago
  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.
  - usrn 4y ago
    This breaks a lot of sites that use custom fonts as compressed replacements for monochrome SVGs.
    - shakna 4y ago
      Those sites are already broken for accessibility.
lelandfe 4y ago
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)
- pmoriarty 4y ago
  The solution to this is to simply not display anything while the page loads.
  - lelandfe 4y ago
    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)
    - usrn 4y ago
      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.
      - lelandfe 4y ago
        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.

by usrn 4y ago

aqfamnzc 4y ago

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

HelloNurse 4y ago
The "closest available system font" is determined by the font names in a site's stylesheets, not by magic.
jaywalk 4y ago
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.
shakna 4y ago
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.
- usrn 4y ago
  This breaks a lot of sites that use custom fonts as compressed replacements for monochrome SVGs.
  - shakna 4y ago
    Those sites are already broken for accessibility.

lelandfe 4y ago

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)

pmoriarty 4y ago
The solution to this is to simply not display anything while the page loads.
- lelandfe 4y ago
  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)
  - usrn 4y ago
    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.
    - lelandfe 4y ago
      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.