3 ms·
I think the best solution for this is to just not use webfonts, and in fact use the system font instead.
by pitaj 1y ago
I think the best solution for this is to just not use webfonts, and in fact use the system font instead.
- Brajeshwar 1y agoI 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.
- wonger_ 1y agoYep, 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.
- Filligree 1y agoWhich 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.
- mananaysiempre 1y agoPartly, 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/ https://jakearchibald.com/2021/f1-perf-part-1/
- luckylion 1y agoWhile 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.
- yencabulator 1y agoThis is also something the browser vendor could provide, without OS-level changes.
- mrec 1y agoFrom https://developer.mozilla.org/en-US/docs/Web/CSS/font-family 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.
- reaperducer 1y agoWhich system font? There’s no standards here; Yes, there is: font-family: system-ui;
- Vvector 1y agoJust brainstorming here, why can't we have "browser fonts" shipped with the browsers?
- skydhash 1y agoThere's serif, sans-serif, monospace,... That's more than enough to present any content.
- xigoi 1y agoThose fonts are not guaranteed to support OpenType features like small caps. This alone makes them inadequate for a lot of content.
- bmacho 1y agoEven better: we have OS fonts shipped with the OS, also users can install additional fonts for all the applications to use.
- valadaptive 1y agoYou 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).
- mediumsmart 1y agoI get Inter at 77kb but that includes 8 language versions of the site... or should it be less?
- Joeri 1y agoOr just use any of the font stacks from https://modernfontstacks.com/ https://modernfontstacks.com/
- yoz-y 1y agoI like custom fonts, but I must say I like this. Will use it on my blog.