Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The Fastest Google Fonts

csswizardry.com

Post reply on HN
Print view View original

31–40 of 152 posts

Re: The Fastest Google Fonts

#31

Post by dsr_ »

thaumaturgy wrote: post #28
slashdev wrote: post #3

Just use the built-in fonts. 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. The people who care most are the ones making the decision to use that font. The solution, tritely, is they should stop caring about the little details that much. The bigger details are usually what move the needle. Don't get st…

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. Web fonts aren't popular just because they're pretty. They continue to be used everywhere because they offer a consistency that's impossible to get otherwise. With a plethora of mobile devices and desktop environments, you can't get a consistent look-and-fee…

It's coming from users, of course. If you give a designer a knob, they will tweak it.

End users don't care if they get Arial, Helvetica, Helvetica Neue or system sans-serif -- except in the case where they set it up themselves, and they're rather upset that you aren't using their preferred versions. But that's OK too, because those end users are almost as rare as designers.

All the inconsistency problems you're noting are of your own devising.

In conclusion, http://bettermotherfuckingwebsite.com/ forever, because https://thebestmotherfucking.website/ goes too far.

Re: The Fastest Google Fonts

#32

Post by ggreer »

thaumaturgy wrote: post #28
slashdev wrote: post #3

Just use the built-in fonts. 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. The people who care most are the ones making the decision to use that font. The solution, tritely, is they should stop caring about the little details that much. The bigger details are usually what move the needle. Don't get st…

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. Web fonts aren't popular just because they're pretty. They continue to be used everywhere because they offer a consistency that's impossible to get otherwise. With a plethora of mobile devices and desktop environments, you can't get a consistent look-and-fee…

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.

Re: The Fastest Google Fonts

#33

Post by wtallis »

ggreer wrote: post #24
young_unixer wrote: post #16

Earlier quoted context omitted.

> 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.

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…

> 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.

Re: The Fastest Google Fonts

#34

Post by kick »

ggreer wrote: post #24
young_unixer wrote: post #16

Earlier quoted context omitted.

> 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.

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…

Wordpress:

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

Facebook:

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

Re: The Fastest Google Fonts

#35

Post by ggreer »

kick wrote: post #34
ggreer wrote: post #24

Earlier quoted context omitted.

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…

Wordpress: Open Sans, via Google Fonts https://wordpress.org/ Facebook: Freight Sans https://www.facebook.com/

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.

Re: The Fastest Google Fonts

#36

Post by singron »

derefr wrote: post #20
onion2k wrote: post #15

Earlier quoted context omitted.

That might change. Google are changing their search ranking metrics to include the new Core Web Vitals metrics[1]. One of those is "Cumulative Layout Shift", or how much the page changes the layout over time. Using a font that isn't performant will cause the page to render, and then to move around once the page loads, which could push your site down on Google's search results page. [1] https://webmasters.googleblog.c…

Has anyone ever suggested doing "progressive fonts"? I.e., start the font downloading before the page renders at all; have the font organized so the first thing that's received is the bounding boxes + kerning table + ligatures table (= enough to know how much space an inline flow of graphemes will take up); then load the page, with the page layout already settled, while loading the font itself in the background. Even…

This is a great idea. Actually drawing the glyphs can be computationally expensive too. I'm not sure what browsers do, but in the last game I made, it was an enormous win to have a glyph cache for the various combinations of (size,glyph,quantized pixel alignment) rather than rendering each glyph from scratch.

I could imagine quickly getting layout information, then asynchronously getting glyph drawing information and painting from the glyph cache when it becomes available. You could even paint a similar fallback font using the layout information of the real font to avoid redoing layout on the whole page while still being readable until it finishes.

Re: The Fastest Google Fonts

#37

Post by johnghanks »

slashdev wrote: post #3

Just use the built-in fonts. 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. The people who care most are the ones making the decision to use that font. The solution, tritely, is they should stop caring about the little details that much. The bigger details are usually what move the needle. Don't get st…

What an absolutely stupid response to this. Of course, just use something that people would already have, 5head. Let me just ask the designer on my team to stop using anything other than Arial and Times New Roman.

If a typical HN reader had their way, every single webpage on the internet would be text-only, with monospace font, and an RSS feed.

Re: The Fastest Google Fonts

#38

Post by jabl »

johnghanks wrote: post #37
slashdev wrote: post #3

Just use the built-in fonts. 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. The people who care most are the ones making the decision to use that font. The solution, tritely, is they should stop caring about the little details that much. The bigger details are usually what move the needle. Don't get st…

What an absolutely stupid response to this. Of course, just use something that people would already have, 5head. Let me just ask the designer on my team to stop using anything other than Arial and Times New Roman. If a typical HN reader had their way, every single webpage on the internet would be text-only, with monospace font, and an RSS feed.

> If a typical HN reader had their way, every single webpage on the internet would be text-only, with monospace font, and an RSS feed.

And what a glorious improvement that would be!

(I could do without the RSS feed, though)

Re: The Fastest Google Fonts

#40

Post by seanwilson »

> It’s widely accepted that self-hosted fonts are the fastest option: same origin means reduced network negotiation, predictable URLs mean we can preload, self-hosted means we can set our own cache-control directives, and full ownership mitigates the risks that come with leaving static assets on third-party origins.

This is my general approach now. Feels like a lot of work to keep up with what the ideal remote loading snippet is when local hosting can be simpler and the fastest option. The deep dive into how all the approaches compare is really interesting though.

It's frustrating web developers still need to deal with this complexity just to load a font. I don't think most non-frontend developers realise how much effort it takes to make a nontrivial high performance website. Most of the time in frontend there's many ways to do the same thing, each with their own subtle performance tradeoffs.

Post reply on HN