8 ms·

Redesigned Google Fonts website

97 points by thm 3y ago

chrisco255 3y ago
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.
- innocenat 3y ago
  I believe the selector for 'Latin' meant 'Families that include basic Latin glyph'. Which is pretty much all families.
  - chrisco255 3y ago
    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.
    - innocenat 3y ago
      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.
- eyelidlessness 3y ago
  > should be the default Why do you think so?
  - SeanLuke 3y ago
    Because twice as many people on Earth use a latin script than any other script?
eek2121 3y ago
Google fonts is just another way for Google to track users.
- javajosh 3y ago
  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.
- fsckboy 3y ago
  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?
  - systemz 3y ago
    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
- atoav 3y ago
  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.
- jmprspret 3y ago
  Not if you download the zip and host it yourself - which you can do
  - hackernewds 3y ago
    That is not what most people will do. if you have a reasonable % sample, you can make valid assessments of the population
eviks 3y ago
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
- vladstudio 3y ago
  You could scroll through https://fonts.google.com/?preview.text=0&preview.text_type=custom&classification=Monospace https://fonts.google.com/?preview.text=0&preview.text_type=c...
  - eviks 3y ago
    No you couldn't, a font can have different styles. That's what databases and querying them is designed for
- mortenjorck 3y ago
  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.
- aragonite 3y ago
  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.
deleted 3y ago
[deleted]
keyle 3y ago
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.
caesil 3y ago
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.
Glyptodon 3y ago
Anyone else finding that it scrolls in a really jumpy way that makes it hard to use on mobile?
- joecool1029 3y ago
  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.
  - chillbill 3y ago
    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?
    - jeroenhd 3y ago
      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.
politelemon 3y ago
(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.
SeanLuke 3y ago
Webpage has many useful filters, but is lacking the single most important one: what license the font is under.
- deleted 3y ago
  [deleted]
- deleted 3y ago
  [deleted]
- tribby 3y ago
  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=OFL http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=...
frankzander 3y ago
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?
toastal 3y ago
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).
- V__ 3y ago
  Fyi: Under GDPR you have to host these fonts yourself.
  - onethought 3y ago
    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.
    - cjpearson 3y ago
      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_fonts_gdpr/ https://www.theregister.com/2022/01/31/website_fine_google_f... [1]: https://lsww-de.translate.goog/shopify-illegal/?_x_tr_sl=de&_x_tr_tl=en&_x_tr_hl=en&_x_tr_pto=wapp https://lsww-de.translate.goog/shopify-illegal/?_x_tr_sl=de&...
rawrawrawrr 3y ago
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.
rpastuszak 3y ago
Tip: more privacy friendly Google alternatives are available and super easy to use: https://fontsource.org/ 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 https://tidings.potato.horse) I use sites like dafont.com and convert fonts using Font Squirrel.
- khobragade 3y ago
  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 https://github.com/rafaelmardojai/webfont-kit-generator
  - rpastuszak 3y ago
    This looks great, and it has a feature allowing for direct import from Google Fonts. Thanks!
  - xtiansimon 3y ago
    > “…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?
    - khobragade 3y ago
      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 https://developers.google.com/fonts/faq/privacy
- 3y ago
amadeuspagel 3y ago
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.
amadeuspagel 3y ago
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.
Jyaif 3y ago
That they maintain this website but decided to drop Google Reader boggles my mind.
sylware 3y ago
"This site requires javascript" google...
- sylware 3y ago
  any noscript/basic (x)html link?
naveen-kumar 3y ago
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 :(
RicoElectrico 3y ago
Still, filters are pretty basic. No filter on x-height, character and stroke width and so on. https://fontshare.com/ https://fontshare.com/ has all of these (not on mobile, though.)
oliwarner 3y ago
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.
snowc0de 3y ago
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.

97 points by thm 3y ago

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.

innocenat 3y ago
I believe the selector for 'Latin' meant 'Families that include basic Latin glyph'. Which is pretty much all families.
- chrisco255 3y ago
  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.
  - innocenat 3y ago
    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.
eyelidlessness 3y ago
> should be the default Why do you think so?
- SeanLuke 3y ago
  Because twice as many people on Earth use a latin script than any other script?

eek2121 3y ago

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

javajosh 3y ago
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.
fsckboy 3y ago
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?
- systemz 3y ago
  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
atoav 3y ago
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.
jmprspret 3y ago
Not if you download the zip and host it yourself - which you can do
- hackernewds 3y ago
  That is not what most people will do. if you have a reasonable % sample, you can make valid assessments of the population

eviks 3y ago

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

vladstudio 3y ago
You could scroll through https://fonts.google.com/?preview.text=0&preview.text_type=custom&classification=Monospace https://fonts.google.com/?preview.text=0&preview.text_type=c...
- eviks 3y ago
  No you couldn't, a font can have different styles. That's what databases and querying them is designed for
mortenjorck 3y ago
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.
aragonite 3y ago
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.

deleted 3y ago

[deleted]

keyle 3y ago

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.

caesil 3y ago

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.

Glyptodon 3y ago

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

joecool1029 3y ago
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.
- chillbill 3y ago
  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?
  - jeroenhd 3y ago
    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.

politelemon 3y ago

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

SeanLuke 3y ago

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

deleted 3y ago
[deleted]
deleted 3y ago
[deleted]
tribby 3y ago
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=OFL http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=...

frankzander 3y ago

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?

toastal 3y ago

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

V__ 3y ago
Fyi: Under GDPR you have to host these fonts yourself.
- onethought 3y ago
  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.
  - cjpearson 3y ago
    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_fonts_gdpr/ https://www.theregister.com/2022/01/31/website_fine_google_f... [1]: https://lsww-de.translate.goog/shopify-illegal/?_x_tr_sl=de&_x_tr_tl=en&_x_tr_hl=en&_x_tr_pto=wapp https://lsww-de.translate.goog/shopify-illegal/?_x_tr_sl=de&...

rawrawrawrr 3y ago

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.

rpastuszak 3y ago

Tip: more privacy friendly Google alternatives are available and super easy to use: https://fontsource.org/ 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 https://tidings.potato.horse) I use sites like dafont.com and convert fonts using Font Squirrel.

khobragade 3y ago
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 https://github.com/rafaelmardojai/webfont-kit-generator
- rpastuszak 3y ago
  This looks great, and it has a feature allowing for direct import from Google Fonts. Thanks!
- xtiansimon 3y ago
  > “…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?
  - khobragade 3y ago
    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 https://developers.google.com/fonts/faq/privacy
3y ago

amadeuspagel 3y ago

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.

amadeuspagel 3y ago

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.

Jyaif 3y ago

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

sylware 3y ago

"This site requires javascript" google...

sylware 3y ago
any noscript/basic (x)html link?

naveen-kumar 3y ago

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 :(

RicoElectrico 3y ago

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

oliwarner 3y ago

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.

snowc0de 3y ago

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.