3 ms·

I HATED sites that used custom fonts when I lived in the country. There are only two ways loading such a site goes: a) you get to stare at a blank page for a

by swiley 6y ago

I HATED sites that used custom fonts when I lived in the country. There are only two ways loading such a site goes: a) you get to stare at a blank page for a couple minutes while the font downloads, if it downloads at all. (this seemed to be google's favorite way to screw over people with bad connections; acknowledgment that it's going to suck and doing it anyway) b) you get two minutes into reading the page only for everything to suddenly jump somewhere else when it switches to the font. (this seems more like the result of ignorant web designers) JS sucks but webfonts consistently make the web an awful place.

colejohnson66 6y ago
Re: (b): I know there’s a MathJax clone that works around the constant reformatting by precalculating the sizes of the various blocks and putting that into the HTML. So your browser basically makes a big empty placeholder box that the renderer will render into. It’d be neat if something like that were available for web fonts. Each paragraph gets its own “block” that the installed font uses (and contains padding), and when the font downloads, it won’t reflow. But I’d assume it’d be way too complicated to deal with (different screen widths is the first to come to mind).
- ori_b 6y ago
  It's also likely to be implemented as a ton of JS to download, which would either block rendering (see option 1 above), or apply after the content loaded (see option 2). So, a bunch of work to fix something that isn't broken when you turn off webfonts and respect user settings.
  - ashtonkem 6y ago
    With an isomorphic web app, that should be calculated server side.
    - ori_b 6y ago
      Using what screen size, page zoom level, and font rendering engine?
      - ashtonkem 6y ago
        .... ah, right.
- kevin_thibedeau 6y ago
  You'd just have to send the font metrics first or extract them early from a partially downloaded font. Then render with temporary glyphs.
- scrollaway 6y ago
  The easiest fix is to ensure you pick a native fallback to your web font which has metrics which closely match your web font. You might have to use a different font-size and letter-spacing while it's loading, even.
crtasm 6y ago
Turn them off entirely, it's an about:config in Firefox and I think a commandline flag on Chrome(?)

by swiley 6y ago

colejohnson66 6y ago

Re: (b): I know there’s a MathJax clone that works around the constant reformatting by precalculating the sizes of the various blocks and putting that into the HTML. So your browser basically makes a big empty placeholder box that the renderer will render into. It’d be neat if something like that were available for web fonts. Each paragraph gets its own “block” that the installed font uses (and contains padding), and when the font downloads, it won’t reflow. But I’d assume it’d be way too complicated to deal with (different screen widths is the first to come to mind).

ori_b 6y ago
It's also likely to be implemented as a ton of JS to download, which would either block rendering (see option 1 above), or apply after the content loaded (see option 2). So, a bunch of work to fix something that isn't broken when you turn off webfonts and respect user settings.
- ashtonkem 6y ago
  With an isomorphic web app, that should be calculated server side.
  - ori_b 6y ago
    Using what screen size, page zoom level, and font rendering engine?
    - ashtonkem 6y ago
      .... ah, right.
kevin_thibedeau 6y ago
You'd just have to send the font metrics first or extract them early from a partially downloaded font. Then render with temporary glyphs.
scrollaway 6y ago
The easiest fix is to ensure you pick a native fallback to your web font which has metrics which closely match your web font. You might have to use a different font-size and letter-spacing while it's loading, even.

crtasm 6y ago

Turn them off entirely, it's an about:config in Firefox and I think a commandline flag on Chrome(?)