Oddbean new post about | logout
Ava | 4 months ago (raw) | export | reply | flag +136
 Did you know Google Fonts is installed on approximately 111,579,992 websites, with around 50,103,810 of those currently live?

Did you also know if you visit a site that uses Google Fonts, it automatically collects user:

- IP address: Which identifies your device on the internet (as of 2022, Google stopped storing users' IP addresses, but they still collect this information).

- User agent: Information about your browser and operating system.

- Referer: The URL of the webpage you are visiting.

...and is therefore "out-of-the-box" in violation of GDPR law?

If you are a website visitor:

You can block 3rd party fonts (web fonts) with uBlock Origin.

1. Open uBlock Origin's dashboard.

2. Go to the "My filters" tab.

3. Add the following line to block Google Fonts:

*$font,third-party

4. Click "Apply changes" to save the filter rule.
There is an even stricter option that blocks ALL remote fonts (not just Google Fonts) that you can activate by selecting "Block remote fonts" in the extension's settings.

*Sites that do not display properly can be excluded from the block.

If you are a website owner:

You can protect your visitors' privacy by hosting your own fonts locally (on the same server as your web pages), using basic OS fonts, or checking out Bunny.

If you haven't heard of Bunny CDN, they offer the only fully GDPR-compliant fonts powered by a CDN as a drop-in replacement for Google fonts.

According to Bunny:

"Bunny Fonts is an open-source, privacy-first web font platform designed to put privacy back into the internet.

With a zero-tracking and no-logging policy, Bunny Fonts helps you stay fully GDPR compliant and puts your users' personal data into their own hands."

https://bunny.net/fonts/

As a side note: Bunny CDN also has one of the most transparent, easy-to-read and understand privacy and data policy pages I have ever seen.

Well done Bunny, well done.

https://bunny.net/privacy/
 
 I should also add, Bunny Fonts is free. No account necessary. 
 thanks for the reminder. ive been meaning to address this on corny chat. 
 You bet ✊ 
 There is an option in ublock already for that: https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts 
 I state this in the post. 
 All right, what I mean is that there is a direct option, no need to add anything. 
 I sate this in the post as a second stricter option. 
 is there a way to see if google fonts got included in my fancypants nextjs compile or if its tracking? #lazyweb should i look in ublock origin?  its supposed to bundle it in but i duno for sure. 
 There are a few of ways:

1. You can inspect the HTML by running your compile in a web browser, open the developer tools, go to the network tab, reload the page and look for (fonts.googleapis.com) or (fonts.gstatic.com) *without the parenthesis*

2. Check the code by looking into your _document.js or _app.js files for any <link> tags that reference Google Fonts

3. Review your CSS files for any (@import) *without the parenthesis* for any statements that include Google Fonts.

And yes, you can also use uBlock Origin to check for Google fonts as well.

Go to the web page of your (Next.js) application in your browser and open uBlock Origin's Logger. Reload the page and watch for any requests made to (fonts.googleapis.com) or (fonts.gstatic.com). These are the domains used by Google Fonts to serve fornt files.

It's also worth noting that (Next.js) has a built-in feature that automatically optimizes and self-hosts Google Fonts. When you include Google Fonts using the next/font/google import, the fonts are downloaded and served from the same domain as your deployment, eleminating requests to Google's servers.

Let me know how you go :)
 
 marked safe from google font tracking i believe. checked network tab, pretty clean.

next/font ftw 
 Awesome 🤙 
 Bunny is awesome. It’s where I’ve been migrating everything from Cloudflare. 
 If i put this two domains into pi-hole i should achieve same result network wide?
I assume ublock solution is only on the level of the browser. 
 Does Brave Browser do this? Or you need the ublock extension? 
 Yes Brave browser can block 3rd party fonts without the need for uBlock origin with their built-in privacy features, specifically Brave Shields. 

When standard fingerprinting protection is enabled, it can block third-party fonts like Google similar to uBlock Origin.

I don't use Brave, but I'm pretty sure this is still accurate. Let me know how you go :) 
 Perfect, I've been using it for a few years and converting the BAT to BTC. It works well.  
 Jesus. 
 Great post. Thanks for the info. 
 Thx. You bet. 
 It’s crazy how many DNS requests you see being used to Google fonts. 
 TIL 😮 Thanks, I hate it 
 LocalCDN extension blocks this too as part of its functionality 
 This is why I avoid Google fonts on my websites. 

nostr:nevent1qqs265m5lt3hkz4k4kw2jgfpqslcn4pf8cdcmj56d3gjt77ej2n8mespzfmhxue69uhkummnw3eryvfwvdhk6tczyp8t3qcs666wm9wx6e4rjkea8n64nwzl4my0w6ga4l2qt2fwq4wk6qcyqqqqqqgqyp9t0 
 I hope you realize that the rule you recommended blocks all CDN fonts including Bunny and/or ones by the website owner served on another domain 
 I recommend two methods. One of them does not. 
 Yes, and the average user is not a website operator.

If they just want Google Fonts and other non GDPR compliant sites gone, then they should be using another rule 
 As it says in the post, "sites that do not display properly can be excluded from the block" using uBlock Origin. 
 Amazing... 

Client side scanning is also coming up

https://www.youtube.com/watch?v=c52pKpYeZ74 
 Great and important information

nostr:nevent1qqs265m5lt3hkz4k4kw2jgfpqslcn4pf8cdcmj56d3gjt77ej2n8mesprpmhxue69uhkzapwdehhxarjwahhy6mn9e3k7mf0qgsyawyrzrttfmv4cmtx5w2m85702kdct7hv3amfrkhagpdf9cz46mgrqsqqqqqpgsshq8 
 Mind blown... 🤯

nostr:nevent1qqs265m5lt3hkz4k4kw2jgfpqslcn4pf8cdcmj56d3gjt77ej2n8mesppemhxue69uhkummn9ekx7mp0qgsyawyrzrttfmv4cmtx5w2m85702kdct7hv3amfrkhagpdf9cz46mgrqsqqqqqpjdyrp0 
 💯
nostr:nevent1qqs265m5lt3hkz4k4kw2jgfpqslcn4pf8cdcmj56d3gjt77ej2n8mesprfmhxue69uhhq7tjv9kkjepwve5kzar2v9nzucm0d5hsygzwhzp3p445ak2ud4n289dn6084txu9ltkg7a53mt75qk5jup2ad5psgqqqqqqsfaz5et 
 Did you know Google Fonts is installed on approximately 111,579,992 websites, with around 50,103,810 of those currently live?

Did you also know if you visit a site that uses Google Fonts, it automatically collects user:

- IP address: Which identifies your device on the internet (as of 2022, Google stopped storing users' IP addresses, but they still collect this information).

- User agent: Information about your browser and operating system.

- Referer: The URL of the webpage you are visiting.

...and is therefore "out-of-the-box" in violation of GDPR law?

If you are a website visitor:

You can block 3rd party fonts (web fonts) with uBlock Origin.

1. Open uBlock Origin's dashboard.

2. Go to the "My filters" tab.

3. Add the following line to block Google Fonts:

*$font,third-party

4. Click "Apply changes" to save the filter rule.

There is an even stricter option that blocks ALL remote fonts (not just Google Fonts) that you can activate by selecting "Block remote fonts" in the extension's settings.

*Sites that do not display properly can be excluded from the block.*

If you are a website owner:

You can protect your visitors' privacy by hosting your own fonts locally (on the same server as your web pages), using basic OS fonts, or checking out Bunny.

If you haven't heard of Bunny CDN, they offer the only fully GDPR-compliant fonts powered by a CDN as a drop-in replacement for Google fonts.

According to Bunny:

"Bunny Fonts is an open-source, privacy-first web font platform designed to put privacy back into the internet.

With a zero-tracking and no-logging policy, Bunny Fonts helps you stay fully GDPR compliant and puts your users' personal data into their own hands."

https://bunny.net/fonts/

As a side note: Bunny CDN also has one of the most transparent, easy-to-read and understand privacy and data policy pages I have ever seen.

Well done Bunny, well done.

https://bunny.net/privacy/

nostr:nevent1qqs265m5lt3hkz4k4kw2jgfpqslcn4pf8cdcmj56d3gjt77ej2n8mespz4mhxue69uhhyetvv9ujuerpd46hxtnfduhsygzwhzp3p445ak2ud4n289dn6084txu9ltkg7a53mt75qk5jup2ad5psgqqqqqqs9m303d 
 Btw I never use Google Fonts on the websites I make. 

1. I always look for an OFL licensed font on https://www.fontsquirrel.com/.

2. Download it and use their web font generator (https://www.fontsquirrel.com/tools/webfont-generator) to compile the css and WOFF/2 fonts for selfhosting.

3. Then adjust the paths and file names slightly and upload it to the web server.

And now a pro tipp:

Use only a custom font for headings. Leave the body text in the CSS set to default. How does that work?

Simply use the CSS instruction:

body { font-family: sans-serif; }

Or serif, if you like. Then the browser will always choose the OS' default sans serif font on the website. Every OS (Win, Mac OS, Andoid, iOS, Linux etc) has a default sans serif font in it, which is normally a well-designed, readable font.

You have to let go of the idea of always displaying the same font on all systems. It is enough to use the best font on each system.

This saves loading time, is an adequate choice in 95% of cases and all have approximately the same size ratio. So the 16px size of the default Windows font is also about the same size as that of the Mac. Just a little different.

nostr:note144fhf7hr0v9tdtvu4ysjzppl382zj0sm3h9f5mz3yhaany4x0hnqptfxrv  
 thanks for that info - i had no idea and I've used googlefonts on some websites

Guess I should have expected it with Google though 😝