How to block web fonts to improve privacy
Websites that make use of text have two main options to display it. Use a font that is available on the majority of user devices or use custom web fonts, which are not installed on a user's device.
Custom web fonts, such as Google Fonts, give web designers more options when it comes to text display on websites, but they require that visitors download these fonts when they connect to the site. Caching is used, usually, to avoid that fonts are downloaded on every page visit.
For Internet users, the use of web fonts has two main disadvantages:
- Performance
- Privacy
Performance is the obvious one, as a request needs to be made to the server hosting the font to download it. While that is usually quick, it still adds to the loading time. Issues with the server may also lead to loading issues on the site. Users who are on a tight bandwidth budget or on very slow connections may benefit the most from the blocking.
Privacy is the second. Since requests are made to servers, e.g., Google servers that host the company's fonts, information such as the IP address is automatically submitted. Not all organizations that host web fonts use the information to track users, but there is always the chance that this is happening.
Google, for example, highlights the following in the terms:
The APIs are designed to help you enhance your websites and applications ("API Client(s)"). YOU AGREE THAT GOOGLE MAY MONITOR USE OF THE APIS TO ENSURE QUALITY, IMPROVE GOOGLE PRODUCTS AND SERVICES, AND VERIFY YOUR COMPLIANCE WITH THE TERMS. This monitoring may include Google accessing and using your API Client, for example to identify security issues that could affect Google or its users.
Since many sites use web fonts, widely used fonts may provide organizations with additional information about a user's activity on the Internet.
Blocking web fonts may lead to display issues on some sites. Sites that rely solely on web fonts, without having fallbacks in place, may not display correctly.
Find out if a site uses web fonts
It is relatively easy to find out if a site uses web fonts.
- Open the Developer Tools of the browser with the shortcut Ctrl-Shift-I. You find it listed in the main menu as well, usually under More Tools.
- Switch to the Network tab.
- Activate the font filter.
- Load the site in question and monitor the listing.
How to block web fonts
Web fonts can be blocked in a number of ways, depending on the browser that is used.
Firefox users may set the preferences gfx.downloadable_fonts.enabled and gfx.downloadable_fonts.woff2.enabled to false to block downloadable fonts in the browser.
The browser has another setting that may be of use. Introduced in Firefox 41, it enables Firefox to set specific fonts for visited websites.
- Load about:preferences#general in the browser's address bar to get started.
- Scroll down to the Fonts section and select the Advanced button.
- Uncheck "Allow pages to choose their own fonts, instead of your selection above". You may need to scroll the window to see the option.
- Select OK.
Users of the content blocker uBlock Origin may add a single custom line to it, to block web fonts. Open the Settings, switch to My Filters, and add the line *$font,third-party. Select Save, and you are all set. The content blocker includes an even stricter option, which blocks all remote fonts. To activate it, select "Block remote fonts" in the extension's settings. Sites that do not display correctly may be excluded from the blocking.
This blocks the use of web fonts on third-party sites only. First party sites are still allowed to load them.
Another option is to use a pre-made anti-fonts list, which you find here. Just import it into your content blocker of choice to block the majority of web fonts out there on third-party sites
Now You: how do you handle web fonts? Are you concerned about them? (via Collinmbarret)
I had a big problem with barely readable fonts in Firefox (usually thin ones). All the fonts I found to give this problems are google fonts, like Montserrat thin : https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2
After searching without finding an acceptable solution, this article gave me the idea to block this SPECIFIC font with ublock: just add the font’s URL to your ublock in “My Filters” and you are done !
I just looked at the external content that ghacks.net tries to load, and it’s a veritable smorgasboard. There is a CDN to provide the Javascript for the website proper, and there’s a Datadog script that provides telemetrics. There’s multiple third party ad servers (aaxads.com, doubleclick.net, amazon-adsystem.com), there’s googletagmanager.com, and some other stuff that I didn’t even bother figuring out what it does. It is entirely unclear which corporate entity owns some of the domains whose contents gets included in this fashion (and who, by extension, get to see site visitors IP addresses).
I find it quite amusing to see people who do not want to use Google Fonts for privacy reasons express those feelings on a site that uses at least two ad companies I distrust worse than Google. Sure, you’re using an ad blocker, but that does not negate the intent of the website owner.
Self hosting fonts isn’t rocket science, and if you have a decent CMS, you can even automatically compile the CSS together with the fonts into one cacheable CSS bundle. Less data, fewer round trips, less servers that can break.
Other than Google Fonts, options are sparse. I gave up on buying commercial fonts because licensing for Web or PDF use is idiotic. There are commercial font CDNs, but I trust Adobe and Monotype as far as I can spit a grand piano. There’s brick.im, but its maintainer appears to be AWOL. Without web fonts, you cannot get a consistent design across platforms, and many of the alternatives put forward require the viewer to have installed fonts by Microsoft or Apple, making the web site ugly or at least unpredictable for folks not wanting to pay the Microsoft or Apple tax. So, for my sites, I self-host open source fonts.
If your web design doesn’t require a specific font, just specify “serif” or “sans-serif”. I have set the beautiful Merriweather family for serif and sans-serif, so sites that specify “serif” look nice on my computer, and if I particularly dislike a website’s choice of font, I override it using the Stylus browser plugin. Power to the people.
Occam’s razor says that with the amount of information people volunteer to Google in the form of visits to Google Analytics (with cookies) and Google Tag Manager (with cookies), it does not make sense for Google to even bother with just the IP address of Google Fonts visitors.
Like it or loathe it, web fonts are here to stay. And privacywise, they’re probably the least of your concerns.
I use PaleMoon and have it configured to use certain fonts of my choosing. In Ublock’s, “my-ublock-dynamic-rules”, it is set to ‘no-remote-fonts: * true’. On a few sites that I choose, these sites are set to false, such as “no-remote-fonts: forum.palemoon.org false”. I hate being tracked by Google, Facebook, etc.
This also makes reading easy. If I use a browser, like TUSK, reading is harder and it is possible to click on the wrong thing. There is much garbage I never see with my configured PaleMoon. That is why I won’t change browsers. It took too long to get it right.
As a web developer, I think blocking web fonts goes a bit too far. I understand the performance and privacy concerns mentioned in the article, but I think they are a bit overblown. Others have mentioned blocking other things like CSS. I also don’t understand that, as CSS is basically a requirement for modern web sites. It’s very difficult to get a consistent look across all browsers, devices, and OSes and web fonts greatly help with that. It would be great if all devices and browsers could support the same font but often that’s not the case. So this is what we have to deal with as developers.
I think the LocalCDN addon can help with some fonts: https://www.localcdn.org/
The LocalCDN extension (Decentralize on steroids) for Firefox can be set to block google fonts. It’s toolbar button drop-down GUI has a toggle just in case you might want to temporarily enable ’em for some reason.
I see that external fonts appear to be disabled by noscript by default.
Javascript plus remote fonts are disabled on most sites in Noscript’s default config. To achieve same thing in uBO, block remote fonts and disable JS. It eliminates every fingerprinting vector. Of course usability is a major issue in this setup.
“Privacy” concerns about [web] fonts is like being concerned with someone seeing how much ketchup you put on your fries at the burger joint.
The reason privacy no longer exists is exactly because of that attitude… “They’re just fonts’, and then it’s something else that seems trivial, until dozens of what you would call trivial, benign or unimportant privacy issues end up with all privacy being taken away. It takes many crumbs to make a slice of bread. If you are not vigilant with all of these then like all change the occurs in society, none of it for our benefit, it sneaks up on you and one day you realize you are totally scr…..d
@allen
I suggest do some research about Edward Snowden showed how the US government uses all possible tech ways to spy on as many people as possible.
Google can track which websites you visit, which pages on that website, and when you visited, if those websites use Google fonts service, and many do.
The US government hasaccess to all the data that Google collects.
A abusive politician can then use that info to find people who oppose him/her.
An example is Trump trying to get the IP addresses of people who are against him
Source: https://gizmodo.com/justice-department-drops-request-for-ip-addresses-of-1-1798325300
There are other examples of this in other countries (Turkey, China, etc)
Tracking user by IP is so 1990s, one house will have multiple users in one IP, one apartment also use one IPs.
With recently implemented CGNAT everywhere, one IP will have hundreds or thousands of user in one IP.
If they still go paranoid over this, they should just buy a VPN lol
Sites load faster without having to download fonts and scripts from third party servers every time if you use a caching proxy like LocalCDN. There’s no downside to it, I haven’t seen it break any sites yet.
I was checking on Bromite, the Android Browser, and there is an open bug to implement the blocking of web fonts.
One of Ghacks sponsors is AdGuard. I purchased a life time subscription through Ghacks and it also blocks fonts if I want it to.
Excellent tip! Thanks.
I use uBlock Origin in advanced mode and block all fonts, scripts, CSS, and large images by default. I almost never need to allow external fonts in order to get readable text.
@ Andy Prough,
It’s usually the case that certain buttons which may be important won’t display properly if you block all web fonts. An example of that can be seen in the two images I posted above – look for the post with the header: “TelV said on September 18, 2022 at 9:21 pm” to see the links.
Although the button in that particular case isn’t important there will be times when you have to make a choice on a site to determine its outcome i.e.click Yes or No. If you can’t see which button is Yes and which is No you’ve got a problem.
Next step will be to block the colours themselves. And the final step, the ultimate privacy improvement, will be the screen all in black. Nothins to see, nothing to be harmful.
Thanks for the article.
IMO it does not makes sense. Ok, providers can use them to track us, but using sites with old, ugly fonts? No way
@Lukasz
One doesn’t need to tackle each and every privacy issue IF it causes usability issues. Usability is always paramount. That being said, good extensions that don’t break stuff are uBlock Origin, LocalCDN, and ClearURLs. Zero usability issues with those in their default config.
Quoting myself, above comment, sorry :
“The wisest would certainly be, IMO, the pre-made anti-fonts list described in the article. I’m on my way to consider that approach.”
I’ve just added Fanboy’s pre-made anti-fonts list [ https://fanboy.co.nz/fanboy-antifonts.txt ] mentioned in the article.
Great, no problem… except that I just encounter an issue with a blocked font that handles, once again, icon images.
Fanboy’s Anti-thirdparty Fonts llist includes :
||fontawesome.com^$third-party
But with that filter [netcraft.com] pages don’t display some of their “icons” …
So we have to add an exception for the filter, or for the filter specifically on [netcraft.com]. Let’s choose the latter hoping not too many other sites be concerned, in which case I’d consider making the exception applicable to all:
In uBO / Dashboard / My rules I have to add:
! FONTS : EXCEPTIONS TO FANBOY’S ANTI-THIRDPARTY FONTS
@@||fontawesome.com^$domain=netcraft.com
I PROCLAIM : using fonts to display images is a pain. To put it mildly, if I may say (LOL).
The article summarizes all available settings to handle a user’s relationship with Web fonts.
Personally,
– I do not block Firefox’s download of Web fonts :
// pref(“gfx.downloadable_fonts.enabled”, true); // DEFAULT=true
– I do not disable websites choosing fonts (0=block, 1=allow)
// This can limit most (but not all) JS font enumeration which is a high entropy fingerprinting vector
// [SETTING] General>Language and Appearance>Fonts & Colors>Advanced>Allow pages to choose…
// pref(“browser.display.use_document_fonts”, 1); // DEFAULT=1
– I do not use a dedicated uBO filter as mentioned in the article [ *$font,third-party ]
Why? Mainly because I’ve encountered too many display inaccuracies with glyphs and various “icon” fonts, those fonts used to display a small image, i.e. “back”, “next” …
My choice has long been to disable websites choosing their fonts (“browser.display.use_document_fonts” = 0) with per-site exceptions : for that I used then a dedicated Firefox extension:
‘Enforce Browser Fonts’ at [ https://addons.mozilla.org/en-US/firefox/addon/enforce-browser-fonts/ ]
But then, when I authorized a site to use its own font(s) for the purpose of having its glyphs displayed, I’d have to accept all of its fonts …
My Web font policy is now to
– accept Web fonts
– together with the LocalCDN Firefox extension and its ‘Block Google Fonts’ option
– Consider not further privacy but aesthetic reasons to use my font of choice everywhere except for given font classes required for … images. For this I’ve set a simple CSS applicable to all pages, set for Arial with exceptions for icon/glyphs … whatever a font rendering an image may be :
*:not([class*=”icon”]):not([class*=”glyph”]):not([class*=”awesome”]):not(i):not([class*=”vjs”]):not([class*=”ion”]):not([class*=”owl”]):not([class*=”button”]):not([class*=”fas”])
{font-family: “Arial” !important;}
Need to say, I like, I love, I adore, I worship the ‘Arial’ font. Calming down : it’s my favorite and I dislike generally speaking serif fonts…
Obviously for once I’m not emphasizing on privacy but on page rendering. I may be wrong. The wisest would certainly be, IMO, the pre-made anti-fonts list described in the article. I’m on my way to consider that approach.
@ Tom Hawack,
You put me on the right track with mention of glyphs and similar inaccuraties. I was experiencing exactly that problem in FF, but didn’t know where it was coming from.
As is my habit of exporting UBO filters and then importing them again in another browser (Floorp) that very same issue arose again and I didn’t have a clue where it was coming from.
But I created a new profile in Floorp to test where a different problem was coming from, but hadn’t imported my UBO settings into it yet. I suddenly noticed that the glyphs were gone and everything was back to normal again.
To cut a long story short as they say I removed the checkmark from “Block remote fonts” in the “Default Behaviour” menu for the previous profile and my glyphs were gone. Here’s a with and without pix. Notice the house icon to the left of the word “Edition”: https://i.postimg.cc/GtCJtTny/without-block-remote-fonts.png
Enable “Block remote fonts” in UBO and no more house:
https://i.postimg.cc/1tcVWWb8/with-block-rempte-fonts.png
@TelV,
Indeed when it comes to fonts uBO provides 2 approaches (as mentioned in the article) :
(1) “Block remote fonts” or not and make per-site exceptions from within its popup;
(2) Block 3rd-party fonts only [*$font,third-party,domain] and per-domain exceptions with [*$font,third-party,domain=~example.com|~other.example.net|~different.example.org]
As stated at [https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts] :
With (1) : “This will block all web fonts everywhere by default, and in this case, you can toggle off the switch to allow web fonts on a per-site basis.”
With (2) : Block 3rd-party fonts only and will “[…] allow third-party fonts for some specific sites.”
The problem with (1) is that it blocks 1st-party fonts as well as 3rd-party fonts.
Personally I prefer the flexibility provided by (2) given the fact many 1st-party fonts include the problematic glyphs (and ‘image’ icons) and that I’m more aware of 3rd-party fonts than those provided by the very visited site.
The article brought back my attention on fonts and made me change my policy regarding them form my above comment.
@ Tom Hawack,
I never could understand why Mozilla doesn’t include Ariel Black in FF’s list of fonts. This is one real advantage in Google Chrome because it’s listed in that browser as an option.
Instead I have to rely on font enhancers such as Legibility https://addons.mozilla.org/en-US/firefox/addon/text-legibility/ to turn even Ariel to a easy to read colour in Firefox / Floorp.
@TelV, Firefox includes ‘Arial’ but indeed not ‘Arial Black’. We all have our legitimate reasons but I cannot imagine such a thick font as ‘Arial Black’ used generically on Web pages, not to mention that the font-strength set to bold (or 900) or semi-bold (600) needs a non thick font to let the strength delta appear : ‘Arial Black’ normal strength (400) doesn’t appear so different than with strengths 600 and 900…
I think I had tried the ‘Legibility’ extension you mention before switching later on to ‘Font Contrast’ [https://addons.mozilla.org/en-US/firefox/addon/font-contrast-fix/] : there are differences between the two extensions, I had preferred ‘Font Contrast’ but can’t remember for what reason!
I uninstalled ‘Font Contrast’ after installing the ‘Dark Reader’ extension which, apart from its basic feature which is to render pages in dark mode, includes a global and per-site font and text stroke preferences, but the font must be included in the user’s selected fonts (so ‘Arial Black’ won’t be available, i.e).
I confess one totally shocking work-around to impose one’s preferred font :
about:preferences / General / Fonts / Advanced… : I set the same font for Serif and Sans-serif in order to have ‘Arial’ also on pages using a serif-font :) Of course works symmetrically for serif-fonts lovers.
One thing I appreciate with the ‘Arial’ font is that it’s normal mode is thicker than most other fonts, which allows a lower font-size; also, in my experience, it suits dark pages better than most other fonts.
Arial and i aren’t married but we get along very well :)
I detest dark mode. Never use it and if I come across a site which has that type of layout I never go back there again.
To a small degree the Ghacks site has that dark background to begin with, but fortunately reverts to a light background after the first five articles.
To my way of thinking which I admit is a bit warped at times, you can seriously damage your eyes by frequently switching from dark backgrounds to light ones and it’s something to be avoided like the plague whenever possible.
@TelV, I can understand that frequent changes from dark to white backgrounds are harmful but this is valid be we in favor of either. Also, white is white but dark pages aren’t black most of the time. I think the average turns around #181818 (dark gray). Personally I couldn’t stand white text #FFF on black #000 pages, but I do appreciate a #C0C0FF over #181818 :)
Day time is not really problematic, but white on black at night burns my eyes, I can tell you!
What are we talking about?! Colors like girls evoking their perfumes… LOL
Read you later!
Regardless of M$, I’ve preferred Segoe from when I first saw it on Win7. It is adorable.
Arial was loved, still liked, from Win3.1.
nmts
@Fish, the ‘Segoe’ fonts are indeed a reference and I remember the enthusiasm when their availability was brought to all. It’s elegant, adorable as can be (“adorable’, the word by itself is adorable!). In French I’d dare say “Une police raffinée” (“A refined font”) moreover when considering that “police” in French means the police as well as a font (“police” or “police de caractères”). A Sunday afternoon smile!
OK, I prefer ‘Arial’ to ‘Segoe’, like a hamburger to a T-Bone. I’ll admit that!
@Tom Hawack
quote: ‘Need to say, I like, I love, I adore, I worship the ‘Arial’ font. Calming down : it’s my favorite and I dislike generally speaking serif fonts…’
I agree. Ariel is easy to read, so less stress on the brain. Serif fonts are harder to read, so I try to avoid them.
Websites are becoming slower and more fragile by depending on many other websites for libraries, fonts, etc.
All your work to fix Firefox shows how developers who are lazy and do not care about the privacy of users or the robustness of the websites they creat, are creating more work for users who want to protect their right to privacy.
@Sol Shine,
> “Websites are becoming slower and more fragile by depending on many other websites for libraries, fonts, etc.”
I agree. Many sites, indeed, not all of course. On the other hand let us not forget that a Website developer needs to make his site compatible with different browser specifics. This said some domains indeed seem to be inspired by the developer’s quest for all the latest design trends, including gadgets which call libraries, fonts etc. as you mention it. A Website can be aesthetic, functional, easy to navigate with a basis which excludes an armada of superfluous craps.
What I notice is that an increasing number of websites, if they do include as before trackers, ads nevertheless run better than before with those extras being blocked, i.e. by the ‘uBlock Origin’ (UBO) extension.
I have set UBO to strict :
* * 3p block
* * 3p-frame block
* * 3p-script block
with exceptions (general or specific) of course. This handles correctly maybe 99% of the sites I visit.
Now, I do encounter very few sites which won’t display correctly even if I set,
* * 3p noop
* * 3p-frame noop
* * 3p-script noop
This means that blocking relies in this case only on the filter lists. Some sites won’t display correctly even with this maximum tolerance. OK: depends of the filters, yet those I apply are managed by pros, they have nothing of exotic, politically biased intentions. Such sites, those which include all possible trackers, cookies, 3rd-party connections… are to be blamed and, IMO, avoided.
The worst I know :
[theaustralian.com.au] : 28 ad trackers & 67 third-party cookies !!! : with my PC and browser security settings it’s impossible to even start the site !!! Few other sites compete for this sad First Prize of worst privacy intrusion. Check a site’s technical probity at [https://themarkup.org/blacklight/].
Most sites I visit run perfectly with uBO strict settings + adjustments. The remaining are simply avoided and even, occasionally, blacklisted system-wide. I truly believe that the best policy for a Website, on the basis of required ad revenue, is to be built in such a way that it runs perfectly *without* the ads and trackers. In my experience this is the trend, perhaps because of the increasing number of users who are fed up with excessive ads and aware of underlying correlated trackers : admins don’t want to loose privacy-concerned users yet cannot (or wish not to) bypass the ad revenue.
@ Tom Hawack,
Firefox fork Floorp identifies [theaustralian.com.au] site as not secure: https://i.postimg.cc/J7j4ddGz/the-australian-not-secure.png
But how come you don’t just enable the “Strict” option in Firefox Browser Privacy? That way you won’t even see a single tracker and cookies will restricted to first party only.
@TelV, I do enable the “Strict’ option in uBO, but uBO will block access to a site only if the site/domain is blocked within its filters. At this time I have 159,400 network filters ? 192,227 cosmetic filters. None of my network filters blocks [theaustralian.com.au], at least not when I had discovered the site (since it’s blocked system-wide).
Firefox I believe would display the same information as Floorp does. I don’t use Firefox’s built-in ‘Enhanced Tracking Protection’, nor the ‘Total Cookie Protection’ feature, I stick on with ‘First party Isolation’ and rely on two major blacklists protections : uBO for Firefox and DNSCrypt-proxy with a domain blocklist of ~11MB and an IP blocklist of ~2MB…. so I don’t know how Firefox would handle our Australian site should I use Firefox out-of-the-box.
@Tom Hawack
I just tried opening the theaustralian.com.au website, and with my privacy settings in uMatrix and uBlock Origin, it will not open in Firefox or Ungoogled Chromium.
I tried disabling some privacy settings, but it still will not open correctly.
I just stopped trying. Not worth my time.
> Firefox users may set the preferences gfx.downloadable_fonts.enabled and gfx.downloadable_fonts.woff2.enabled to false to block downloadable fonts in the browser.
According to arkenfox the pref `gfx.downloadable_fonts.woff2.enabled` got removed in FF 69 (https://github.com/arkenfox/user.js/commit/feaa1c3e99f658f28dc59d6aa92ed1cfeefbe57d). The other one, `foo` is considered to be useless and is part of section 7000 ‘DON’T BOTHER’ (https://github.com/arkenfox/user.js/blob/master/user.js#L1159). Maybe the article can make this more explicit?
??? THIS ???
Yep, used to block fonts. Main reason being loading time and on some sites content would different from initial loading – mainly alignment would change slightly. Then switched to block third party only. For the past year I’m in a bit relaxed state and so now no fonts are blocked. But I have blocked Google fonts in dynamic filtering pane of uBO.
After reading this article time has come to take measures for privacy again. Thanks MartinB for the article.
https://filterlists.com/lists/fanboys-anti-thirdparty-fonts
fonts.googleapis.com is present on so many websites due to lazy website admins, it‘s ridiculous. Such laziness enables one of Google‘s mightiest tools in their tracking arsenal, their not-so-benign free font service. It is often overlooked because it is so subtle.
https://www.theregister.com/2022/01/31/website_fine_google_fonts_gdpr/
Thank you for the link to the list. I was able to import it into Vivaldi’s built-in ad blocker. Also, thank you for the article.