Blocking web fonts for speed and privacy (2016)
collinmbarrett.com
collinmbarrett.com
https://codeberg.org/nobody/LocalCDN/
Removes integrity and crossorigin tags from embedded script and style elements to replace even more frameworks
Font Awesome
Google Material Icons
jQuery
Bootstrap CSS
Bootstrap JavaScript
AngularJS, AngularJS-Animate, AngularJS-Sanitize, AngularJS-Cookies and AngularJS-Touch
React, Vue.js, Chart.js and many other frameworks/libraries
MathJax (minimal)
TinyMCE (without plugins)
Prepared rules for uBlock Origin, uMatrix, AdGuard and NoScript
https://codeberg.org/nobody/LocalCDN/src/branch/main/core/ma...
https://codeberg.org/nobody/LocalCDN/src/branch/main/core/re...
It was nice to see they quoted our blog article https://www.privacyguides.org/blog/2021/12/01/firefox-privac...
We've been on a bit of a mission of trying to dissuade people from "old thinking" of installing a gazillion "privacy extensions".
> We also noticed that there isn’t an option for HTTPS-Only mode.
Firefox on Android does support that, nowadys.
I would think this would be an important consideration in your assessment of the company.
https://www.theverge.com/2021/9/6/22659861/protonmail-swiss-...
At the very least mentioning this information would be beneficial to your readers.
Outside of Tor, I'm not going to be held hostage by trackers such that I'm forced to allow fonts in a way that makes me look average. By using any amount of ad blocking, script blocking, no-opping, href cleansing, and so on, I'm making myself more identifiable by any tracking that still manages to work. Whatever. At least I've reduced the amount of time it takes for a page to render.
The guide is meant to go along with the arkenfox user.js from that repo (previously known as ghacks user.js), and I highly recommend checking out the rest of the repo if you are privacy-conscious.
Firefox has this setting built-in, gfx.downloadable_fonts.enabled and browser.display.use_document_fonts, but AFAIK it's not configurable via GUI by default.
Chrome hides it even deeper in a command-line option, --disable-remote-fonts
I suppose you could argue that many users can be uniquely identified either way but it’s no doubt a strong additional piece of info.
Arguably that single boolean characteristic (“fonts disabled”) is way less info than the dozens of characteristics you expose when fetching a font.
Is it possible to spoof information like that in a browser without reprecussions though? I don't think I've seen any extensions to spoof things like this, just settings to block the gathering of data in the first place.
Unless, of course, we talk about any site that uses Cloudflare, which is a first party tracking service built into into the web server itself.
Also, title likely needs a "(2016)"
https://github.blog/2016-02-22-delivering-octicons-with-svg/
For a11y reasons, include a text alternative, like the alt attribute on <img> elements or adding a <title> in your <svg>.
That likelihood is relatively low (though not as low as JS CDNs). Modern browsers explicitly forbid sharing cache entries across websites; so the likelihood is zero now.
>There are some privacy concerns when your browser makes the link to the font network’s domain. While they deny the practice, these services have the ability of profiling your browser (using browser fingerprinting with your IP address and HTTP referer header) to track what sites you visit, building a valuable profile about you that they could sell to marketers.
Also, if you're in the EU, this constitutes an illegal GDPR data export if the company running the CDN has any amount of American ownership.
My personal opinion is that instead of blocking Google Web Fonts, we should have an extension with the entire Google Web Fonts library preloaded in it, that transparently redirects every font lookup to its local cache. This neatly fixes the privacy problems and makes all CDN fonts load super fast.
so that's just called installing fonts!
I think the idea of web fonts is so that new fonts could be added and a user doesn't have to do something local to the browser.
And this feature costs privacy. If people really understood the implications of loss of privacy, they would not want it. However, most people don't, and would gladly swap privacy for features (and then in the future complain about it when the implications becomes real or affects them).
Also, there's no particular reason why webfonts need to cost privacy. The only reason to ever hotlink Google Fonts was to either...
- Accelerate load times (which is dubious)
- Be slightly easier to implement for lazy developers
Google Fonts are all freely licensed and specifically allow you to rehost them. All you have to do is download the TTFs and link to them in a @font-face declaration.
Adobe Fonts are the ones you can't self-host, because the actual CDN is a vehicle for calculating and charging a licensing fee. The privacy risk is deliberate, in this case - font owners need to know how many pageviews sites are getting so they can be charged the correct amount. Even then, this is something that could be done by having each site report their own usage statistics... except then the font vendors have to trust you, and they don't want to do that.
Even a decade ago when this was common practice, it was absolutely pointless because Google Fonts used to (still does?) set a cache time of only 2hrs.
https://www.myfonts.com/collections/neue-helvetica-font-lino...
>That likelihood is relatively low
That likelihood was never high, and obviously so, I have no idea why it gets parroted so much. And even if it was true, I could have shown up to your website with jQuery and bootstrap cached, but oops it was a different free cdn so cache miss.
The only thing you had a high likelihood of is customers noticing your website was slow without knowing its just your poorly chosen free cdn being temporarily over capacity.
By blocking all web fonts and fallback to only system font, you may still be able to read the text, but will completely missed the design.
Does anybody apart from designers actually care?
A webpage is a bunch of text, if your webpage can't be read with something like "font-family: Verdana, Arial, sans-serif;" then you are doing it wrong.
With modern web "application", the chances you see a bunch of text would either be the T&C page, documentation you read, or news website.
These days we shop online as much as we do physically, so I pick two random clothing brand, Uniqlo and Levis. To create the same experience you shop online as you do offline. These two websites employ their font instead of system font, Uniqlo Pro and Helvetica Now.
From a function point of view, blocking those font does not stop you from buying their clothes. But part of the user experience will be lost.
Disclaimer, I am engineer in the media industry and has no association with the two example websites.
I like to print things like Train times and such when heading out, just in case I need to alter plans and tech fails so I can't look up the next option online. When flying on holiday I have a little was of paper with connection details, luggage rules, etc. Printing is increasingly unusable direct from sites/apps so I've taken to either writing my own notes (which has the bonus of saving paper) or taking screenshots (which also saves paper as cropping allows less irrelevant detail & site chrome to be included).
I'm almost nobody in a large number of other respects too though!
Art being one that doesn't factor in greatly, but also has its own subjective definition.
There's design that's for helping the user access and process the information. I like this design, I'm all for it; pro-user.
There's design that's for aesthetic; motif; differentiation for the sake of differentiation. This probably overlaps with "art" and can, and often does, actively work against usage of the site for the sake of 'cool'. Works for people that rate aesthetic over content.
Then there's design for engagement and / or advertising revenue (and I'll include "data slurping" as advertising revenue). In relation to the topic, its likely one of the other design choices is leading to secondary data slurping that the website designer may not be aware of.
With good balance, we should be able to create a world that is both aesthetic and functional.
This means when it comes to software design, function always trumps form. A tool should never be designed with form over function in mind, it must always be function over form. Any form (design) that impedes the function must be culled with extreme prejudice.
When it comes to remote fonts, they slow down page download and consequently load time, they violate privacy rules and laws, they impede accessibility when fallbacks fail or do not exist (eg: Webdings, aka "icon" fonts), and objectively they only serve as a form of luxury for the website with no regard for end-users.
Most of us also know from experience that software designers by and large prioritize form over function, oftentimes with complete disregard for the function thereof.
So I second grandparent post's opinion: Screw designers. Removing them from the development process will bring about more net benefits than any benefits they might be bringing to the table.
Show example please.
> they violate privacy rules and laws,
Show more example please. Let's not forget when you access a webpage, the server already know what IP address you are connecting form. If the web font is loaded from the same host, the owner of the page does not violate any privacy rules than servicing you the page.
> they impede accessibility when fallbacks fail or do not exist
This is only when it failed.
> Most of us also know from experience that software designers by and large prioritize form over function, oftentimes with complete disregard for the function thereof.
You may have experienced designers who are bad at their job, but it does not mean a good design, including using or not using web font, help deliver the function better.
> So I second grandparent post's opinion: Screw designers. Removing them from the development process will bring about more net benefits than any benefits they might be bringing to the table.
I welcome your view, despite how myopic it is, and I hope you live by your value, which means code using vim/emac, not using any GUI tools, and browse the internet using lynx the text internet browser.
It's an additional resource that needs to be requested, downloaded, and processed by the browser. While the processing will happen either remote or local, local system fonts don't need to be requested and downloaded which saves bandwidth and time (aka faster page load times).
>Show more example please. Let's not forget when you access a webpage, the server already know what IP address you are connecting form.
EU rulings concerning GDPR and remote fonts.
>If the web font is loaded from the same host, the owner of the page does not violate any privacy rules than servicing you the page.
And in fact, this is suggested by the EU as a way to abide by GDPR while using remote fonts. The vast majority of remote font use cases are not served directly by the website, though. It's all a sad state of affairs.
>You may have experienced designers who are bad at their job, but it does not mean a good design, including using or not using web font, help deliver the function better.
Sure.
Thing is, in recent times I've experienced far too many terrible designs and I can't recall even one example of a good design.
User needs and desires aren't being considered by designers, so fuck it, I'm past the point of caring about throwing babies out with the bathwater. Throw them out, nothing of value will be lost.
>I welcome your view, despite how myopic it is, and I hope you live by your value, which means code using vim/emac, not using any GUI tools, and browse the internet using lynx the text internet browser.
The only thing myopic is your attitude. Good designs can exist, but when it comes to modern software design they've all turned horrible. The very fact you are trying to override user complaints with designer desires is indicative that you too consider form over function, which for a tool is nonsense.
I appreciate that you're a designer and an artist and you want to flaunt and exhibit your vision for all to see, and that's fine. Meanwhile, we've got shit to do and we need/want computers to enable us so we can get shit done, and your visions are getting in the way. So please save your passion for the art museum, tools are not avenues for artistic expressions.
Sure, bad designs that inhibit functionality are bad. But good design that enhances it are better than no design, so removing good designers from a pipeline is a bad thing.
In my opinion, products driven entirely by developers with no design sense are just as bad as those driven by designers with no development sense. The solution involves good teamwork between both parties.
this has always been the case html provides __suggestions__ css and what not let me interpret those suggestions as I will.
If you want to curate your design experience put it in a pdf for your fanbase and leave my day to day browsing out of it.
So you'll keep everything that matters and throw out the stuff that doesn't. Got it!
"I see no reason for fonts, so they must serve no real purpose."
My browser, my connection, my rules.
That's why I disable thirdparty fonts by default and bug our designers when some text overflows in our app, due to some fixed width assumption in CSS, because system native font they did not design for is wider.
You can also A/B test the guillotine vs human executioner. The best option is not always a good option.
Blocking web fonts, zapping away floaty banners and other design irritations via uBlock Origin, and making liberal use of Reader Mode gives me a much more coherent experience of the web.
If your designer can't make your website work well with one of the hundreds of fonts preloaded on my machine, I don't know what to tell you. If your website looks like crap because your designer couldn't come up with a good fallback font that's still on the designer.
It's like "web colours" all over again. Web designers should work within the constraints of the user agent or they shouldn't design for the web, and one of those constraints is that the font doesn't always look exactly like the designer wants it to look. It's called a user agent for a reason, these days more and more because the source it's rendering is as anti-user as can be.
I have web fonts turned off because I'm sick of text shifting because the particular Arial-but-not-really font a website insists on got loaded in. I've also occasionally had to use reader mode because the "design" was very fancy but practically unreadable.
Sample post: https://alokgovil.com/understanding-self-reliance/
It's using just Arial and Times New Roman.
https://0x0.st/oOUq.png (nullprogram.com)
https://0x0.st/oOUb.png (https://developer.android.com/training/basics/firstapp)
As someone has already pointed out, unlike web fonts, SVGs can be used as inline resources.
It's not just icon fonts though, using web fonts themselves can lead to bad design practices.
It's a normal user modifiable choice in the browser. You're just making your webapp much less usable for users who have made that choice. And for no reason, because SVG icons work just fine and are even more flexible. Font icons are basically a hack. They have terrible fallback behavior.
of course there's other benefits like just having to load one file for all your icons, although the tradeoff is also that fonts are messier to update if you're doing custom stuff and not just fontawesome
As a person who works in martech it's patently bizarre to read this stuff. There's a difference between something being provent theoretically possible in a laboratory environment and actually making it out in the real world.
The entire browser profiling angle refers to something that does not currently exist, does not conceivably scale well, and chases after an infinitesimally small potential monetary gain.
Can someone theoretically climb up the building and break into your apartment on the 6th floor? Sure. Does it need to be included in your risk assessment? Well it's me, your neighborhood burglar, and I'm saying not really.
One underrated aspect of custom fonts on websites is that they actually enhance security for the average user. One of the first and often only things that lets someone know they are being MitM attacked or phished is when the corporate branding feels "off". So while you may not understand the value of "corporate identity" or all of that nonsense, in the days before corporate identity was such a big deal, people got hoodwinked by lookalikes all of the time.
Why? Man in the middle can just snatch off the credentials on the way back to the backend, they don't need to change anything.
This is where the tech industry is at though. All the low hanging fruit has been harvested long ago. The tens of thousands of devs in the Bay Area are building things that make "infinitesimally small potential monetary gain" because at web scale that's hundreds of millions of dollars. They might not be doing this particular thing, but they are doing something, so vigilance is necessary if you value your privacy.
Fingerprinting using IP address, running scripts, canvas fingerprinting, using installed fonts, and checking what resources are cached/blocked are all things that are being widely used in many websites, and are not just "theoretically possible".
They are even being sold as a product and are used by many companies.
Look at their customers - https://fingerprint.com/ .
I'm so confused by GP post. We were doing fingerprinting 15 years ago.
Welp that's scary, can detect me when I'm on VPN, off it, in private browsing mode, different country in private browsing mode...
We maintain pretty robust customer databases and our needs are much different. Just proving you are a unique device isn't useful in most contexts if we don't have good or reliable ways of associating it with existing profiles. Notice that none of their customers are marketing companies.
What this site won't tell you is that fingerprints have a half-life less than 24 hours (when you lose the fingerprint). Useful for anti-abuse measures, somewhat useful for ad-attribution, absolutely garbage for long-term tracking.
You sure? Quick google suggests somewhere in the low single digits of big sites is applying some sort of fingerprinting - though unclear how much is for security vs tracking
Fingerprinting is used everywhere. It's a wide spectrum from basic metrics to very in-depth tracking, all depending on the scale, latency and functionality of each scenario. This can range from frequency capping to fraud detection to stopping bots, to uniquely identifying devices.
I will say that it's mostly used to improve UX by increasing security and limiting spam/bots/fraud but that doesn't mean its not used to track devices and people, although it's sold as targeted ad campaigns rather than specifically following individuals.
I have yet to ever see a database of fingerprints or what it even looks like. It could very well be that advertisers keep it as part of a secret black-box, but every vendor we have ever used has been entirely dependent on cookies and the only data we've ever collected has been cookie or session-based. I've been sold a lot of garbage adtech over the years, so my hunch was that this was another bit of industry vaporware.
Depends on how stable the signals being used are. Some can be very durable.
> "How do you distinguish between different user accounts on the same device?"
Fingerprints usually identify a device or specific user-agent. I'm not sure about the context for this but you can augment it with cookies to specify "user accounts".
> "How do you tie a fingerprint to your database of existing customers?"
How do you tie any random alphanumeric ID - whether stored as a cookie on device or recognized as a fingerprint - to a customer? Mappings still exist and work the same way.
> "How do you keep cookie data from conflicting with fingerprint data?"
What would be the conflict? Ideally only one is used as the primary identifier and takes precedence.
How so? We have even deprecated IP Addresses in our database as we found they no longer have any sort of day to day accuracy (too many devices jumping networks constantly) or there are too many shared IPs for work networks. It seems like most fingerprints are just IP address + random identifiers.
Referrer-Policy: no Or Referrer-Policy: same-origin
To avoid sending its url to third parties. Of course it requires the original site to configure itself that way and doesn't help with the user's preferences.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Re...