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

11–20 of 152 posts

Re: The Fastest Google Fonts

#11

Post by shash7 »

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…

Simply bumping the weight upto 400 would make the site much more readable.

Re: The Fastest Google Fonts

#12

Post by shash7 »

open-source-ux wrote: post #10
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…

"Specifying custom fonts is largely a waste of bandwidth for a very marginal improvement in aesthetic...They should stop caring about the little details that much" For many websites, the choice of font can make a noticeable difference to the appearance of the site and yes, make it more aesthetically pleasing. Of course, it's best to choose only a minimal number of font weights to keep downloads size to a minimum.

Checkout variable fonts. With them, you only load 1 single font file(abit a bit bigger) and specify the weights and styles through css.

Re: The Fastest Google Fonts

#13

Post by tyingq »

brenden2 wrote: post #2

It's better to block web fonts with uBlock Origin. It would be sweet if someone could add support for these fonts to Decentraleyes as well, which seems to be missing. Seems to be some debate about the merits of doing so, however: https://github.com/Synzvato/decentraleyes/issues/34 I'm okay with 1st party usage, but I don't want Google following me around the web.

I wonder if Mozilla or DDG or some other privacy centric org might consider mirroring Google's fonts.

Re: The Fastest Google Fonts

#14

Post by jandrese »

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…

Yeah, I couldn't read through the whole page either. It seemed like they were trying to speed up the font by making it thinner and sleeker.

Re: The Fastest Google Fonts

#15

Post by onion2k »

winrid wrote: post #7
Elidrake24 wrote: post #5

Earlier quoted context omitted.

I agree entirely; the clients don't. It's an almost universal question brought up by them during the design phase - "this font looks like everyone else, we want our own". The changes to TypeKit have certainly put a squeeze on their options, but they still almost universally hate the system level fonts. Wish I could convince the business guys to push back, but eh, there are bigger problems we face on a day to day basi…

Even the System Font Stack? Also, this list won't help anyway. The clients aren't picking fonts by performance.

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.com/2020/05/evaluating-page-ex...

Re: The Fastest Google Fonts

#16

Post by young_unixer »

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…

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

Re: The Fastest Google Fonts

#17

Post by onion2k »

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 )

You'd hope so. csswizardry, aka Harry Roberts, is a web performance consultant. His job is to make websites load fast.

Re: The Fastest Google Fonts

#18

Post by clairity »

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…

you're arguing not to overly optimize and sweat the details, but then prematurely optimizing by recommending against custom fonts.

different fonts give sites different personalities, adding richness to the web (whether you appreciate it or not). for 99.9% of sites, being overly focused on font size/download speed is an unnecessarily trivial optimiztion.

with that said, don't remotely load google fonts because privacy does matter. for most sites, the speed and bandwidth difference doesn't matter. just serve them as first-party, cacheable assets.

Re: The Fastest Google Fonts

#19

Post by snazz »

clairity wrote: post #18
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…

you're arguing not to overly optimize and sweat the details, but then prematurely optimizing by recommending against custom fonts. different fonts give sites different personalities, adding richness to the web (whether you appreciate it or not). for 99.9% of sites, being overly focused on font size/download speed is an unnecessarily trivial optimiztion. with that said, don't remotely load google fonts because privacy…

The argument in favor of Google Fonts and similar services is that visitors likely already have that font cached from visiting another site that uses the same font. It can also decrease bandwidth costs if that's a bottleneck.

That said, serving from your own domain is a great way to make sure that a third party can't break your fonts, in addition to what you mentioned about privacy.

Re: The Fastest Google Fonts

#20

Post by derefr »

onion2k wrote: post #15
winrid wrote: post #7

Earlier quoted context omitted.

Even the System Font Stack? Also, this list won't help anyway. The clients aren't picking fonts by performance.

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. Eventually, the text just pops into existence (without disrupting the layout) once the font is available.

Or, if you don't want to make the browser engine understand the intricacies of font formats, just split the font file for each font-family into two new file-subformats, one for layout-description and one for visual-description. Then add a rule to the CSS parser, saying that CSS references to font layout-description files are loaded synchronously (i.e. blocking rendering), while CSS references to font visual-description files are loaded asynchronously (as they always have been.)

Post reply on HN