[young_unixer]

> Use a good fallback list so each platform gets a good option. Specifying custom fonts is largely a waste of bandwidth for a very marginal improvement in aesthetic.

If you're content with mediocrity, sure. But if you value your brand you will want the fonts to send the message that you want to be associated with your brand. Also, you'll probably want them to be in line with the rest of the design.

[ggreer]

Web fonts are my litmus test for whether I can trust a designer's judgment. Users don't want to see a site's brand in every letter on the page. They want legible text that loads quickly.

The default fonts on Windows, Mac, iOS, and Android are the result of millions of dollars of R&D. Custom fonts are far more likely to have issues with kerning, hinting, or subpixel rendering. They also degrade load times and cause a re-flow when the font is done downloading.

All of these issues can be avoided by using the fonts that are already installed on the user's device. That's what Github, Wordpress, Facebook, and Twitter do. They all have distinct brands without custom fonts.

[wtallis]

> Users don't want to see a site's brand in every letter on the page. They want legible text that loads quickly.

The worst cases of this are when a site loads a font that has a few letters re-drawn to match the companies logo, but the font is used as the site's default for body text. That leads to words unrelated to the company's name appearing with pieces of the company logo—very distracting and harmful to legibility.

[kick]

Wordpress:

Open Sans, via Google Fonts https://wordpress.org/

Facebook:

Freight Sans https://www.facebook.com/

[ggreer]

When I visit Facebook I see...

    font-family: Helvetica, Arial, sans-serif

...on every element I inspect.

When I visit Wordpress.com and check the font on the body, I see:

    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif

For paragraph text such as on https://wordpress.com/about/ I see...

    font-family: Merriweather, Georgia, "Times New Roman", serif

...though no web fonts are downloaded.

It's wordpress.org (not .com) that has Open Sans. Not sure what that's about.

[baddox]

You snuck in a hidden implication, which is that web fonts are less legible than system fonts. That's absolutely not the case across the board.

[ggreer]

The system fonts are legible. With web fonts... sometimes they are and sometimes they aren't. And web fonts have that re-flow during page load, which is super annoying when you're reading the first paragraph and lose your place because the web font finally loads and it's a different width than the system font. If that's not an instance of illegibility, I don't know what is.

[baddox]

It's very simple to use font sizes and contrast ratios that are different to read with system fonts too, if you want to do that for some reason. Web fonts aren't unique there. The re-flow is a valid technical problem, and one that ought to be improved.

[Alupis]

If that happens, it means someone doesn't understand HTML and CSS, and how they work to display in a browser.

Hint, it should never happen on a well designed site.

[Silhouette]

The default fonts on Windows, Mac, iOS, and Android are the result of millions of dollars of R&D.

For quite some time, Apple was using Helvetica, a typeface that has objectively awful (edit: legibility) properties.

Meanwhile, some of the web fonts you see have had a very large amount of money spent on making them and world class font designers working on them.

So I don't think this argument carries much weight.

Custom fonts are far more likely to have issues with kerning, hinting, or subpixel rendering.

That depends entirely on the quality of the custom font.

As another example, for a long time on Windows you could get strange results with font stacks that used Helvetica/Arial/equivalents, because someone's random printer font would end up taking precedence over the system font you intended and result in your page looking atrocious. If you didn't know that one and used some widely recommended font stacks based on default system fonts, you would get awful results for a significant number of users.

That's what Github, Wordpress, Facebook, and Twitter do. They all have distinct brands without custom fonts.

They all have strong brands without any reference to visual design at all, other than arguably their highly recognisable logos.

However, the other 99.9999% of businesses you'll come across don't. If you're not already a world-famous unicorn brand, a well-designed and consistent look and feel does affect brand recognition and, in some cases, have very practical effects on usability.

[gumby]

> But if you value your brand you will want the fonts to send the message that you want to be associated with your brand.

That's an important point. Unfortunately loading custom fonts slows down the experience and when that happens it does tell me something about the brand.

(It's likely the overhead of loading fonts is drowned out by the overhead of all the trackers, but I have those blocked which speeds the web up enormously. Likely that makes me not the kind of reader you want...so this works out well for both sides).

[Silhouette]

Unfortunately loading custom fonts slows down the experience

Unless someone has either gone totally overboard on the number of fonts or set their site up very badly, this is largely a non-issue in most markets today.

The total weight of all web fonts on any site/app I've worked on recently was typically less than the largest single image on the home page, and loading those fonts from a well-configured CDN rarely took more than a few tens of milliseconds and happened in parallel with everything else.

Of course you could get a FOUT if you are using an unreliable Internet connection and it drops out at just the wrong time. But then, you could equally well be missing important images or seeing a layout reflow when a stylesheet finally loads in that environment as well.

[nicbou]

That's also my experience.

My self-hosted, cached, server-pushed fonts keep the total load time well under 500 milliseconds. I load 2 fonts in a total of 6 variants.

The 100kb responsive header is a much bigger bottleneck.

You can achieve much bigger savings with proper caching, gzipping, a fast server and a lightweight page than with system fonts.