Redesigned Google Fonts website | Hacker News Reader

Redesigned Google Fonts website

material.io

97 pointsthm84 comments

These days, I'm always scared when I hear a product I use is getting an upgrade.

Usually it means large teams of designers have to be seen doing something and are constantly redesigning things and inventing paradigm no one asked about.

In this case though, the new design is a step forward. I always found the previous version significantly worse than the original. Those panels that tease you about what you have like a shopping cart was annoying. It seems now it's more of a conscious side panel I can dismiss and nail to the side(?)

I like swipping down like crazy and instantly seeing fonts I've never seen before. It's fast, responsive and fun!

The new navigation is definitely better.

Tip: more privacy friendly Google alternatives are available and super easy to use: https://fontsource.org/

I switched most of my sites to use it and I’ve been quite happy so far. It just works.

No need to leak data to Google.

For weirder stuff (e.g. https://tidings.potato.horse) I use sites like dafont.com and convert fonts using Font Squirrel.

There's this phenomenal app for font conversion called Webfont Kit Generator. The feature I like the most is Subsetting, it greatly reduces the file size. You might find it useful.

https://github.com/rafaelmardojai/webfont-kit-generator

This looks great, and it has a feature allowing for direct import from Google Fonts. Thanks!

> “…more privacy friendly Google alternatives are available and super easy to use […] No need to leak data to Google.”

For the unaware, what about Google Fonts is a privacy leak?

When you embed Google Fonts on your website, the IPs of your visitors, the URLs of the pages they visited, and the User-Agent of their browser is sent to Google. Now they say[1] they don't use this information for profiling and targeted advertising, but they very much /can/.

Given Google's business model, I personally don't have a reason to trust them with my visitor's data, no matter what they do with it. Self-hosting the required fonts is a 2-minute job anyway.

1: https://developers.google.com/fonts/faq/privacy

There is also https://fonts.bunny.net

But its still not clear wether that satisfys the GDPR or not, better be safe and host the fonts on your CDN or locally.

Bunny is a reputable company and they're EU based. At the same time, they also promise zero loggin and that they don't pass any information to any third parties and that they're GDPR compliant.

They couldn't write it so boldly without risk of litigation unless that actually was the case, so I would consider it safe to use.

"They couldn't write it so boldly without risk of litigation unless that actually was the case," lol. Lmao even.

That doesnt matter, the issue is you using a CDN without a Data processing agreement.

Why not just download the fonts and self-host? No leakage.

Of course you can, this is just a shortcut for anyone using NPM.

CDN+Web font-related PSAs:

Users: it’s a good idea to block all third-party fonts so you’re not leaking data (filter rule: *$font,third-party). Unlike scripts/styles, fonts generally don’t hurt the UX (unless a developer is using icon font which haven’t been best practice in a decade--which is ironic considering this blog is broken).

Developers: vendor these Google Fonts (most are licensed SIL) as other have noted in this thread & host them first-party for the benefit of your users. If the cost (hosting or performance) is too much to host the fonts, consider using less fonts because users are still paying for the bandwidth. (I am still pro-web fonts, as they can be in improvement on the UX, just be smart about it).

Fyi: Under GDPR you have to host these fonts yourself.

is that true? Using a font is not trafficking any of the users Pii data? Google might be breaching gdpr if they are doing some crazy tracking, but I don’t see how a consumer of their fonts could be breaching. I am probably missing something.

Using a Google font causes the client to send a request to Google servers. The Google server then receives the client's IP address. Occasionally a judge will consider that a GDPR violation. [0] Sometimes using a CDN will also be considered a GDPR violation under the same logic. [1]

But it seems like it just depends on which judge you get. There are thousands of sites in Europe that use Cloudflare, Google Fonts and Shopify and only a few that have been fined because of it.

[0]: https://www.theregister.com/2022/01/31/website_fine_google_f...

[1]: https://lsww-de.translate.goog/shopify-illegal/?_x_tr_sl=de&...

To expand on this. One difference between CDNs and Google Fonts is, that you normally sign a contract with your CDN under GDPR. I think the English term is data processing agreement. If the CDN is above board, and you have this contract, the situation is different.

Important context:

- this is ridiculous. “Leaking an ip address on the internet!?” - so isps are screwed?

- it was a 100£ fine.

For any who doubt you on this count:

https://github.com/google/fonts/issues/1495

...still apparently up in the air, more than five years after the GDPR went into effect.

I have found a clarifying comment, but while the comment [1] says:

> The Google Fonts Web API does not log or store IP addresses.

The linked source [2] only says that they don't use IPs to create profiles or to target ads. They very well might store them. Even giving them the benefit of the doubt, they can change their mind at any time and suddenly one is in legal jeopardy.

[1] https://github.com/google/fonts/issues/5463#issuecomment-129... [2] https://developers.google.com/fonts/faq/privacy

CDNs (the kind where a third-party domain shows up in your HTML) have been largely pointless for a long time anyway and were probably purely around for generating metadata in the last couple years, since browsers segregate all caches by top-level origin. So ten years ago "but what if the user already was on a site using the same exact version of jQuery/font/whatever has already been to another site using the same CDN, then that might be cached and save 50 kB" turned into "it will always be downloaded" years ago.

Folks interested in reading more about this assertion: Public CDNs Are Useless and Dangerous <https://httptoolkit.tech/blog/public-cdn-risks/>

Psst https://fontsource.org/ Is a really good, privacy-friendly Google Fonts alternative.

Privacy-friendly ∨ GitHub+Discord … pick one?

This is just another way to get fonts, no? It could be convenient to some, but doesn’t do much more than let you preview the a font & download it. Is a Node package manager the right tool to be downloading fonts?

npm is pretty good for downloading fonts when the alternative is downloading, hosting, and configuring webfonts by hand.

NPM is good also at downloading malware.

Fontsource is not malware. But being good at downloading malware does translate into downloading fonts, too

Perhaps try cloning the repo do Codeberg and pull from there? Should be trivial.

> unless a developer is using icon font which haven’t been best practice in a decade

This is sadly quite common though, even and especially on hugely popular web sites.

I usually message support anyhow. Icon fonts helped webdevs support Internet Explorer with *.eot but after IE finally got SVG support, there was no reason to continue with icon fonts. The biggest general offenders are Font Awesome users (even when they offer SVG sprites) & Material Icons—with the latter being particularly broken with the icon name in plaintext (like this site) making it impossible to read versus just a broken Unicode tofu you’d expect. If the developer did the right thing & added title attributes, at least when you have a cursor you can see the name of the action.

Vendoring is the correct answer. I maintained a webfont service for a couple years, and stopped when I determined there wasn’t any overwhelming technical complexity preventing vendoring….just serve fonts like any other asset. No need to introduce a third party service.

So how do I find fonts that have 0s with a dot in the middle?

> filters are now easier to reach and sectioned out meaningfully

"Technology" is not a meaningful section, and in general having section taking more space than its content of just a single item doesn't help

You could scroll through https://fonts.google.com/?preview.text=0&preview.text_type=c...

No you couldn't, a font can have different styles. That's what databases and querying them is designed for

This is a long-running a shortcoming of Google Fonts, and as much as this is a welcome UI upgrade, it unfortunately does nothing to address the paltry set of tags that have passed for a taxonomy since Google Fonts’ inception.

It’s a particular shame given what a truly rich typographic library Google Fonts has grown to be: transitional and oldstyle serifs, didones, humanist sans, geometric sans, grotesks, even frakturs… all of this is flattened into an MS Word-caliber set of classifications that still calls script display types “handwriting” fonts.

Not saying this applies to your situation, but I'm always slightly amused when I hear tech-oriented people say "this font would be perfect for me except for this ONE deal breaker" (often but not always the problem of insufficient differentiation of 0 and O). It's pretty trivial to modify fonts! Just download FontForge, open the font file, navigate to the code point in question, and simple operations like adding a dot or bar is usually pretty easy to figure out.

I have some proportional fonts that are perfect for some use cases except that they don't display block characters correctly and/or their digit characters are not of uniform width, and I fixed that by copy pasting from the corresponding code points from monospace fonts.

Good point, though bugs can easily creep in with such simple edits: in your copy&paste monospaced digits example you lose the ability to have both monospaced and proportional digits via a stylistic flag (and those are useful: use monospaced in tables, use proportional digits in text)

Also it's many files, not just one (though hopefully variadic fonts will catch on), so unfortunately patching fonts is a bit more complicated :( (but if it's literally close to just one thing, that it could still be worth it)

Same issue with finding fonts that have ligatures.

Since you're allowed to add your own sample text, I always use something like this:

efficient, effluent eggs 3690 Il1 GQ To AV Va Yo

... which shows ligatures (if any), old-style numerals (if any), descenders, the zero in a code font, differentiation among similar-looking characters, and familiar kerning pairs (if any).

That's a poor workaround since many good fonts have alternative styles for such things, and these wouldn't show up

and just discovered another joke of a search from a search giant helping me "find what you’re looking for"

You can't find Source Code Pro with any of the 3 Decorative stroke flagged even though that's supposed to be an exhaustive list (serif, no serif, slab serif)

(mobile) There is a cookie dialog at the bottom of the page that is covered by the bottom navigation. It can no longer be dismissed. A little more testing would not hurt.

The old design made it easy to copy paste some CSS to use Google's CDN to add fonts to a website. With the new design, I have no idea how to do this. Am I stupid?

Edit: Pressing Select [font name] + adds it to a "shopping cart", where it displays the code to copy it to a website. I am dumb.

Webpage has many useful filters, but is lacking the single most important one: what license the font is under.

all google fonts are OFL (the copyleft SIL open font license[0]) with the exception of some legacy fonts which are apache 2. they don’t publish fonts that aren’t OFL anymore

0. http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=...

So I tried to select for only Latin fonts (should be the default), and it refuses to filter by them, showing me about 3 or 4 alphabets I've never even heard of in the top 5 results.

I believe the selector for 'Latin' meant 'Families that include basic Latin glyph'. Which is pretty much all families.

Super unfortunate, I mean, I'm sure the font nerds are geeking out about the #2 listing Noto Sans Old Permic, an alphabet for a language which only about 500K people speak on planet earth (and probably much fewer type). And the #3 listing Noto Sans Sagdian, a language and alphabet that's been dead since the 11th century, but for the vast majority of us just looking for true Latin font faces, it's not helpful at all.

All those font families have regular Latin characters. It just default to show those languages. If you open the sidebar and type some text in the "Type something" box then it will show you those font families with the text you type.

> should be the default

Why do you think so?

Because twice as many people on Earth use a latin script than any other script?

Still, filters are pretty basic. No filter on x-height, character and stroke width and so on. https://fontshare.com/ has all of these (not on mobile, though.)

The sidebar is nice. I miss the grid though. Higher information density meant it was easier to skim through and look for a nice font.

To be honest ... I don't like it. I would like to display the fonts as squares. I often didn't choose a font because it has disadvantages in readability compared to another font if it's used to show text in a paragraph.

Why is now everything on the left side? The filter is compared to the filters of adobe or other big font sites more or less unsophisticated. Why always this senseless upgrades?

Anyone else finding that it scrolls in a really jumpy way that makes it hard to use on mobile?

It's doing lazy loading. On my faster mobile devices it's not too jarring. On the slower ones... yeah it's a jumpy mess. Would imagine it's really bad on slower connections.

EDIT: To be clear I'm talking about the font page not the post announcing it.

I have a consistent 150 Mbps and it’s jumpy as hell, how fast does my connection have to be to scroll properly according to the Google standard?

The limiting factor is your browser's performance more than anything. Dynamically loading in a hundred fonts isn't something most browsers are optimised for. The jumping around is the text boxes resizing when a font loads.

The alternative would be preloaded all fonts which would simply crash slow devices and waste bandwidth.

It's just a shame they didn't test it on their own devices.

On a Pixel, the bottom navigation obscures the cookie and privacy banner (making that permanent) and trying to change the font language results in a fight for focus between Google Keyboard and the typeahead select, resulting in everything closing.

Hard to be enthusiastic.

Edit: Going landscape allowed me to dismiss the cookie banner.

Why is the classification setting an intersection? When I have "display" selected and click on "monospace" I want to see only monospace fonts. Fonts categorized as both display and monospace don't exist.

There was a point where a font page in Google Fonts used to have a section of recommended font pairings. That was insanely useful for me when I was getting started - miss this feature now :(

That they maintain this website but decided to drop Google Reader boggles my mind.

man... i wish they would have just left it alone. i dont really like this change. hiding things behind a menu. leave it to google to ruin a good thing.

"This site requires javascript"

google...

any noscript/basic (x)html link?

Google fonts is just another way for Google to track users.

Indeed, but there are ways around that. Check out fontsource (e.g. `npm install @fontsource-variable/roboto-flex`) to add fonts as a locally hosted dependency.

explain? are you talking about "if you use them on the web, they track"? If I install the packages on my linux distro, that doesn't get tracked does it? they're just fonts? or do they keep pulling things down?

linux package is downloaded once or every upgrade by generic http client, not that frequent vs when loading lot of different pages which use Google Fonts and gives some info from browser

If you use their cdn instead of putting them on your own server sure. There is an Austrian ruling that this is a violation of the GDPR, so you might not wanna do it anyways.

For the ultra paranoid font files are to be avoided because fonts raise the complexity and thus the attack surface — I can't imagine an attacker couldn't use a malicous font or a zero-day in the font rendering engine to exploit a client.

Not if you download the zip and host it yourself - which you can do

That is not what most people will do. if you have a reasonable % sample, you can make valid assessments of the population

> Not if you download the zip and host it yourself - which you can do

I don't think it's quite the same, though! If you go to Open Sans, for example (https://fonts.google.com/specimen/Open+Sans?query=open+sans), and preview the CSS that it generates for the Regular style, then you'll get this: https://fonts.googleapis.com/css2?family=Open+Sans&display=s...

You'll notice that it uses a lot of the unicode-range property, to split the font up into different languages, so not everything needs to be downloaded for every site (e.g. if your site doesn't have cyrillic characters), in addition to them serving WOFF2 as well:

  /* latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

In the downloaded archive, realistically you'll only have the TTF variation, like OpenSans-Regular.ttf, and will have to think about WOFF and WOFF2 conversions yourself. While those aren't too hard to do, splitting fonts up I still haven't figured out, so many of my sites with self hosted fonts have like 400 KB of arguably unnecessary overhead (I rather like the PT font family), which in some cases is the majority of the total download size.

I actually started building my own site where I'd keep some of the converted fonts that I personally like, but obviously it's not meant for greatness: https://fonts.kronis.dev/ (maybe some day I'll go back to it and actually figure out the font splitting)

Edit: in case anyone is curious about how to convert fonts, on Debian/Ubuntu I found these tools to be helpful: woff-tools woff2

I use them like so:

  sfnt2woff "some-font.ttf"
  woff2_compress "some-font.ttf"

The tool parent and sibling comment listed allows you to do basic subsetting [1], and generates the formats you need. If you do this more often, it is of course useful to learn how to do this yourself. A commonly used tool is pyftsubset, part of fonttools [2]. I am not sure, but afair Google is running this under the hood.

[1]: https://fonts.google.com/knowledge/glossary/subsetting

[2]: https://github.com/fonttools/fonttools

For subsetting Glyphhanger works really well: https://github.com/zachleat/glyphhanger

Also Google still cares about serving the correct font version depending on your browser and OS, e.g. by not sending variable fonts (where one font file covers multiple font weights for example) to old browsers that didn't yet support them.

People self-hosting Montserrat are one bane of older browsers, because that seems to be a relatively popular font that got converted to a variable font file at some point, and which in browsers without variable font weight support then gets displayed at the thinnest possible font weight, which is really thin. (I concede that this is a niche complaint, but still…)

The google-webfonts-helper makes it easy: https://gwfh.mranftl.com/fonts

I use an extension called LocalCDN (iirc) to locally supply copies of common JS frameworks so I'm less likely to be tracked on that front. I'm sure it skews some log somewhere if I never request those libs.

Now I'm off to find an extension that serves local copies of common Google fonts.

Most of them are available thru Nixpkgs too. You can make a small derivation to turn any font into WOFF2 with GNU Parallel + `fontforge --lang=ff -c 'Open($1); Generate($2);' {} $out/{/.}.woff2`.

Just use the google-webfonts-helper (https://gwfh.mranftl.com/fonts) and host the fonts you want locally if you don’t want to use Google's CDN.

It is.

Why does anyone expect a private company to serve fonts for them without any interest to extract value.

If you want the fonts, read its license and find a way to acquire them and host it yourself for performance, security, privacy and peace of mind.

Someone here already linked the Google font downloader tool…

I guess it depends how much you want to believe them, but they deny this in their FAQ: https://developers.google.com/fonts/faq/privacy#:~:text=For%....

This is one purpose of Google fonts, but it's not the only purpose.

Google has nearly 100% search market share, so one of the only ways that they can increase search traffic at this point is by increasing web traffic in general. One of the ways they do this is by making it easier to create web content by e.g. distributing fonts.

See Gwern Branwen's excellent article on the subject: https://gwern.net/complement

Does my freedom of thought include the freedom not to have to read the same sentence again and again, reducing it to Lorem Ipsum? This is the form of authoritarian propaganda, regardless of the content. The medium is the message.

Reply on news.ycombinator.com