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

71–80 of 152 posts

Re: The Fastest Google Fonts

#71

Post by Alupis »

ggreer wrote: post #65
baddox wrote: post #45

Earlier quoted context omitted.

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.

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.

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.

Re: The Fastest Google Fonts

#72

Post by ken »

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…

> They continue to be used everywhere because they offer a consistency that's impossible to get otherwise.

That sounds backwards to me. Using standard fonts is how you achieve consistency. Using a custom font for just your webpage is not helping me (the user) get consistency at all. That's what 'standard' means.

(Frequently, custom fonts also hurt readability, which is why I hit "reader mode" on nearly every webpage these days. Every single day I run across webpages with custom fonts that I literally struggle to read.)

The situation is just like early versions of Mozilla or Java, where they used the same UI toolkit on all platforms for "consistency". Eventually, programmers realized that users tend to switch between applications more often than they switch operating systems, so the way to achieve consistency for actual users is to match the local environment.

> Variability in system fonts means [...]

Yes, all of those are real problems. That's why I've set up my web browser in a way that results in legible text for me. As per the Pottery Barn Rule, if you use a custom font, you're taking responsibility for all of these issues -- and you're going to screw up at least some of them (or something you didn't think of), and I'll hate your webpage for it.

Re: The Fastest Google Fonts

#73

Post by csswizardry »

Solar19 wrote: post #67

Faster still would be to skip the request for the CSS altogether by inlining it in the head. Therefore you'd just request the font immediately and directly. This makes the preconnect moot, and should be faster. Faster still is to use already installed fonts, as others have noted. But don't use "system" fonts if that means UI fonts like San Francisco or Segue. Exploit the rich font options on the desktop: Georgia, Sit…

OP here. Inlining CSS won’t work as the request is UA-sniffed.

Re: The Fastest Google Fonts

#74

Post by csswizardry »

rkagerer wrote: post #8

This page opens crazy fast (at least for me). Well done. EDIT: Okay, still a few things they could improve on ( https://gtmetrix.com/reports/csswizardry.com/N9gkLyhq )

Thanks! Though GTMetrix hasn’t been considered a reliable or relevant tool for a while now, unfortunately.

Re: The Fastest Google Fonts

#75

Post by csswizardry »

microcolonel wrote: post #9
rkagerer wrote: post #8

This page opens crazy fast (at least for me). Well done. EDIT: Okay, still a few things they could improve on ( https://gtmetrix.com/reports/csswizardry.com/N9gkLyhq )

The main content may load quickly, at least with javascript disabled, and that's a good thing; but I can hardly read the text though. 300 weight text at 51% grey is awful. When I see pages formatted like this, I tend to make a decision between opening the inspector and fixing the fonts, or just not bothering to read it, since it's clearly not designed to be read. Original: https://qui.suis.je/drop/faster/illegible.pn…

Thanks for the feedback!

Re: The Fastest Google Fonts

#76

Post by baddox »

ggreer wrote: post #65
baddox wrote: post #45

Earlier quoted context omitted.

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.

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.

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.

Re: The Fastest Google Fonts

#77

Post by csswizardry »

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…

I did say right there in the article:

> On this site, in which performance is the only name of the game, I forgo web fonts entirely, opting instead to make use of the visitor’s system font. This is fast, incredibly well suited to the device in question, and has almost zero engineering overhead.

So… well read, I guess?

Re: The Fastest Google Fonts

#78

Post by ken »

thaumaturgy wrote: post #43
ggreer wrote: post #32

Earlier quoted context omitted.

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'…

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

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

Re: The Fastest Google Fonts

#80

Post by phonon »

partiallypro wrote: post #46

I do like that now Google lets you downloads the fonts, so you can serve from your own CDN without having to hunt them down or download them manually from their CDN endpoint. One thing I'd like to see Google do is add icon font sets to their repo.

https://github.com/google/material-design-icons/archive/mast...
Post reply on HN