63 points by birdculture 4 days ago|16 comments
MisterKent 5 hours ago
Do we really need to keep pandering to the people who block JavaScript and fonts?

At some point it's on them to live with their choices. And just from my small sample size (I doubt there's a large sample anywhere), those people are more interested in complaining about their self-inflicted woes than engaging with the content.

/rant

sometimez 10 hours ago
So basically just use monospace, serif, or sans-serif because you can't 100% be sure it'll render correctly?
xigoi 9 hours ago
Fuck that. I don’t want my website to look ugly because 99.9% of users don’t bother to change the defaults.
holsta 8 hours ago
If browsers were slightly better at asking users, maybe we'd all have our three favourite fonts and background-, text- and link-colours instead of what someone else prefers we stare at all day.
ctippett 7 hours ago
Some of my favourite fonts I only discovered because I first visited a site that included it in their design.
kibwen 9 hours ago
This is not at all what the article recommends. I recommend actually reading it.
xigoi 8 hours ago
> 3. Strongly consider using only a generic family

Seems clear enough.

porphyra 10 hours ago
> If not inlined, subresources can fail to load for all kinds of network reasons.

Also, it's commonly recommended to load fonts asynchronously/deferred without blocking the main page render. But I HATE it when the page jumps around as it cycles through different fonts before the real one loads. I'd rather get dinged on PageSpeed insights with "Requests are blocking the page's initial render, which may delay LCP. Deferring or inlining can move these network requests out of the critical path." rather than have everything popping about for the first second. Is it just me?

cryzinger 9 hours ago
This drove me crazy on one of my (very lightweight) static sites... even on incredibly fast connections you'd always see that FOUT. I managed to solve it with font-display: fallback.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/A...

I also had to make sure I was preloading my fonts properly... not sure if this is the same guide I followed, but it's close. The only difference is that I swapped that "&display=swap" to "&display=fallback":

https://dev.to/pilcrowonpaper/preloading-google-fonts-37h1

gurjeet 8 hours ago
chrisweekly 10 hours ago
Def not just you!
Grom_PE 8 hours ago
What the hell.

Just now I learned of "font-family: monospace, monospace" hack. Indeed, browsers will render the font smaller with just one "monospace".

I've never run into it before because setting explicit font-size in pt or px avoids that weirdness.

mherkender 6 hours ago
Arial has better support for some locales on desktop devices.
overvale 3 hours ago
I mean... isn't this the entire point of font-family fallbacks?
Terretta 2 days ago
These days you can have an LLM code you up python to custom match visual metrics from your preferred web fonts to the likely user fonts across your statistical user base.
_verandaguy 9 hours ago
But why?