Hacker News Reader

Comment by pitaj | Hacker News Reader

I think the best solution for this is to just not use webfonts, and in fact use the system font instead.

I don’t have extensive experience on this yet, but I believe this is also a solved issue (using custom fonts). Serve the font-family from the same source as the website, preload only the primary font-style (say “normal”), and custom-pick the font to just the Latin subset. That should be fast enough that almost none will notice, except for the pedantic developers like us (personally, I can forgive that).

Henceforth, let the others (styles, variable, etc) kick in as needed.

Yep, that's what I do on my website (except for the Latin subset). Still noticeable on spotty connections, like on a phone in a dead zone.

Or just use any of the font stacks from https://modernfontstacks.com/

I like custom fonts, but I must say I like this. Will use it on my blog.

You can also subset your fonts; e.g. if your content is in a language that uses the Latin alphabet, then you only need to include those characters in your font. Between that, variable fonts, and WOFF2, I've managed to get Inter down to 50kB (plus another 50 if you need real italics).

I get Inter at 77kb but that includes 8 language versions of the site... or should it be less?

Which system font? There’s no standards here; each operating system has their own, with no guarantees as to what is available.

Until OS developers get their house in order, designers will keep on ignoring them.

Partly, the answer is “tough”. As a designer, you don’t and aren’t meant to have pixel-level control over the screen contents. Web is not print. Don’t ask for the PostScript standard fourteen. (Somehow this lesson comes through much better for reflowable ebooks.)

Partly, I am willing to admit that web fonts are still nice when you can get them. But they’re too unwieldy to block on (slow connections exist; font foundries are assholes[1]; etc.), and we don’t really have a solution (the problem with FOUC is not the unstyled content, it’s the layout shift).

[1] https://jakearchibald.com/2021/f1-perf-part-1/

While I'm absolutely not a design-should-rule-all person, I think there's quite a range between "pixel-level control" and "you can't choose which font to use".

If we'd reliably have the top 50 google fonts on every OS, there'd be a lot less webfonts used.

This is also something the browser vendor could provide, without OS-level changes.

From https://developer.mozilla.org/en-US/docs/Web/CSS/font-family :

    system-ui

    Glyphs are taken from the default user interface font
    on a given platform. Because typographic traditions vary
    widely across the world, this generic is provided for 
    typefaces that don't map cleanly into the other generics.

Which system font? There’s no standards here;

Yes, there is:

   font-family: system-ui;

Just brainstorming here, why can't we have "browser fonts" shipped with the browsers?

There's serif, sans-serif, monospace,... That's more than enough to present any content.

Those fonts are not guaranteed to support OpenType features like small caps. This alone makes them inadequate for a lot of content.

Even better: we have OS fonts shipped with the OS, also users can install additional fonts for all the applications to use.

Reply on news.ycombinator.com