[ggreer]

You said it yourself: Users are viewing your site on devices with totally different screen sizes, different resolutions, on different platforms, with displays of varying brightnesses, glare, viewing angles, color spaces, and in environments of varying levels of lighting. Given these constraints, it's not possible to get a consistent look-and-feel.

So don't waste resources trying. You'll create more problems than you'll solve.

Nobody tests their web fonts as thoroughly as the default fonts have been tested on their respective platforms and devices. Web fonts can have odd platform-specific bugs with kerning, hinting, and subpixel rendering. I've had web fonts render without hinting on Edge, but look fine on Chrome & IE on the same system. How does one even begin to write automated tests that detect issues like that? Using the default fonts guarantees you'll never have to worry about such bugs.

The system's installed fonts are guaranteed to work. They improve performance. They prevent re-flows. And they're what the user is accustomed to. These reasons and more are why Facebook, Github, Twitter, Wordpress, and many others use the system fonts.

[baddox]

But it is possible to get a consistent look and feel for fonts, by using web fonts.

[ggreer]

If by "consistent" you mean "looks like garbage on some platforms", then yes, it's possible: https://medium.com/@ValidScience/two-mysterious-web-font-bug...

Web font bugs show up in the weirdest places. Unless you're constantly vigilant and manually test across all the platforms you want to support, some users will see crappy fonts. Hardly anybody goes looking for these bugs, so the bad fonts can be shipped in production for years without anybody at the company noticing. This is what has happened at Apple, Wired, and Medium.

Not that consistency is worth striving for. There's not much consistent about what you can show on both a 6" 4K OLED and a 15" 1366x768 TFT LCD. Certain fonts will look great on the former and be borderline-unreadable on the latter.

[baddox]

The first one is, just like it says, a bug, and apparently a bug that Apple fixed on their website. The second one is Wired using a terrible web font. Neither the possibility of having fixable bugs nor the option of choosing a terrible font strike me as particularly strong arguments against web fonts. You are already free to use system fonts at terrible sizes or contrast ratios, and many sites definitely do that.

[Solar19]

I'm the author of that Medium article. The "second one" you referred to isn't the second bug I reported – it's just an aside on Wired's crazy headline font. They've since replaced it with a normal readable font...

[wtallis]

I feel like we need some clarification about what "consistent" means here. If we're talking about having the typography shown to user A look exactly the same as that shown to user B, why does that matter? (And why do the major font rendering differences between Windows and macOS not matter?)

If we're talking about having the typography on user A's phone look the same as on user A's desktop, that seems a bit more reasonable, but the rest of the UI is necessarily going to be drastically different save for perhaps the color scheme.

Or is the "consistency" that matters here about making sure the website is pervasively using the same typography as the advertisements?

[baddox]

> If we're talking about having the typography shown to user A look exactly the same as that shown to user B, why does that matter?

Well, I suppose that's a valid question, but it's moving the goalposts. We were talking about having consistent fonts, and I'm claiming it's absolutely possible by using web fonts (after all, that's the reason web fonts exist).

[wtallis]

> Well, I suppose that's a valid question, but it's moving the goalposts.

We still haven't figured out where the goalposts started!

[thaumaturgy]

> So don't waste resources trying. You'll create more problems than you'll solve.

This doesn't follow. It's an argument for "put black text on a white background and call it a day because this is too hard". People don't pay money for that.

Web fonts solve an entire class of problems unrelated to whether the user is standing in the sunshine or not.

> Nobody tests their web fonts as thoroughly as the default fonts have been tested on their respective platforms and devices.

This is wrong in fact, given that the most popular fonts are coming from big design houses that probably know more about the details of font rendering than I'll ever know about any subject [1]. It's also wrong in principle because exactly zero people get paid to test platform-default fonts for my application or website. That leaves it up to the developer to test the site on every platform under the sun and moon and, even when they do that, they still have users with goofy font installations that make it look bad or unusable.

> Using the default fonts guarantees you'll never have to worry about such bugs.

Again: it doesn't, because when you do this, you're using whatever fonts are installed on the user's system, and there are a lot of people running around with crappy knock-off fonts installed. Using the default fonts guarantees that this is an issue.

And where are these people coming from that care about inconsistent subpixel rendering in web fonts but don't care about inconsistent layouts from using whatever bag of fonts they happen to have on their system at the time?

> The system's installed fonts are guaranteed to work.

Allow me to repeat myself: a "Consolas" font on one system is not the same as a "Consolas" font on another system. There are no guarantees when relying on a system's default fonts, and that's why web fonts are popular.

> ...Wordpress, and many others use the system fonts.

It's a shame you included this example, because it opens a big door for me.

Let's look at the style.css file for Wordpress's default "twentytwenty" theme [2]. It includes a gnarly font hack near the top along with the following comment:

> Chrome renders extra-wide   characters for the Hoefler Text font. This results in a jumping cursor when typing in both the classic editor and block editor. The following font-face override fixes the issue by manually inserting a custom font that includes just a Hoefler Text space replacement

...and right below that it includes two web fonts.

Their twentynineteen theme includes the same hack but no other web fonts.

How about the most popular third party theme? Web fonts: https://themes.svn.wordpress.org/astra/2.4.4/assets/fonts/

15 out of the 20 most popular Wordpress themes include web fonts (not counting FontAwesome or other symbols-and-icons fonts). I checked.

Facebook, Github, and Twitter operate at scales that are not relevant to most of the engineers on HN. They are motivated to spend engineering budgets on performance and they're willing to forsake things like typographic consistency if it saves them having to pay for another data center.

The first not-Facebook-scale example you cited is full of web fonts.

[1]: https://fonts.google.com/?sort=popularity

[2]: https://themes.svn.wordpress.org/twentytwenty/1.3/style.css (warning: content-disposition: download)

[ken]

> There are no guarantees when relying on a system's default fonts, and that's why web fonts are popular.

Technically true but misleading. There are no guarantees when including custom web fonts on a web page, either. It's the web! No matter how much fancy CSS/JS wizardry you throw in there, it's ultimately up to my browser to put the bits on the screen.

I guarantee most web designers didn't test with any of my 3 main web browser configurations, because a good portion of the time I can't even read the text through their CSS.

Earlier, you pondered:

> There seems to be a reply like this at the top of every font-related thread on HN. I often wonder whether it's coming from designer/developers or from end users.

It's amazing how many designers screw up web fonts -- maybe that's why avoiding them is also so popular.

[ggreer]

I was talking about wordpress.com, not Wordpress blog themes or wordpress.org. Of course the themes are going to go wild and use every possible browser API to customize their appearance. That doesn't mean it's a good idea.

I'm surprised you're talking about knock-off fonts, because I think it argues against your position. The portion of users who have installed crappy knock-off fonts is far smaller than the portion of users on slow internet connections (such mobile users), or the users annoyed by the re-flow, or those who run into bugs in the web fonts themselves. Apple, Wired, and Medium have all shipped web fonts that look like garbage on Windows.[1] They didn't notice these bugs for years because they simply don't test on Windows.

So web fonts cause more annoyances and bugs for the majority of users to slightly improve the experience of a tiny fraction of users who have misconfigured their systems. Do you also write code that defends against buggy browser extensions? At some point you have to accept that the user is responsible for their own device. I'm fine admitting that if a user has the gumption to install custom fonts, they also need to be knowledgeable enough to choose good ones.

1. https://medium.com/@ValidScience/two-mysterious-web-font-bug...