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.
they do have the advantage of being easy to recolor even as an external resource. I personally don't use them and instead use SVGs and there's always the decision of whether to add a bunch of inline svgs, which you can do cool effects and even transitions on for hover effects or light/dark mode, or using external images, which are nicer in terms of separation of concerns, re-use without having to update multiple places and not having graphics buried in the source code somewhere. It would be cool if we could even just have a simple CSS filter that replaces all non transparent parts of an externally embedded image with a single color.
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
>Additionally, most of the time web fonts are downloaded from a third-party delivery network such as Google Web Fonts or Adobe Fonts. One of the advantages of using these systems is that the likelihood that a visitor’s browser already has a font cached locally from a previous visit to any other site using the same font is relatively high.
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.
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).
Yes, but if you install the entire font library locally then you have all those fonts in your system font picker, which you may or may not want. You also have to continue checking for new fonts or have sites that use them break. Having an extension do this for you is easier.
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.
on macos you can install fonts and put them in categories. so i can have a category called “web fonts”. anytime i wanna pick fonts in other apps i’ll just look through my favorite categories instead of the whole fonts book.
Please don't use TTFs for your webfonts. They are far too big for the task and the optimized option, WOFF2, is so well supported that barring a future formats, I would consider all other formats deprecated for the web—don't even host them or include them in @font-face.
and exactly how large of a download would be "download entire font library"? all that just to use one font? that's like downloading an entire JS library to use one thing from it if not worse.
If you're selfhosting you only need to have the fonts you actually intend to use, not the entire library. Having the entire library would only make sense for an extension that replaces Google Fonts requests with itself.
> 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.
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.
This will not work for web fonts that are required license. For example, the commercial font served by MyFonts by Monotype. The license term clearly stated that every time when the font is loaded, the counting system increase and incurred a cost to the owner.
> >the likelihood that a visitor’s browser already has a font cached locally from a previous visit to any other site using the same font is relatively high.
>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.
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
browser.display.use_document_fonts is Settings ? Fonts ? Advanced ? Allow pages to choose their own fonts, instead of your selections above. Note that that’s distinct from disabling web fonts: it will cause your chosen fonts to be used (so `font-face: some-web-font, Arial, sans-serif` will resolve to sans-serif), but still allow loading of web fonts for the Private Use Area, so that all mainstream icon fonts except for Google’s misbegotten Material Icons (which uses ligation of ASCII code points, which is a technique that was a horribly misguided idea from the start and makes accessibility worse far, far more often than it makes it better, and the precious few cases it makes better could readily be made betterer by other techniques) will still work.
In a similar vein, LocalCDN is an extension to serve the most common javascript libraries from your browser instead of going to 3rd party servers, while there are edge cases when you use a local copy, I've rarely had an issue.
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
More complete lists can be found in the source code, there are a lot of them:
Tried this when it was actively developed and it done nothing but spew a load of errors in my browser console. Not sure if that was intended, but it made me cry looking at all the errors. It also broke many sites, where the proper jQuery version wasn't served, and a bunch of CSP errors in my console too. On top of this, it increases the fingerprintability of the browser, so this was an easy uninstall.
LocalCDN provides no meaningful privacy gains over enabling Total Cookie Protection (i.e. dynamic FPI, already enabled by default in modern versions of Firefox) and disabling cross-site referers, which you should do anyways.
Are the abbreviation tooltips written by hand or generated programmatically? In "Total Cookie Protection (TCP)" it says TCP stands for Transmission Control Protocol.
Why do "you" (as in PrivacyGuides) keep ProtonMail on the recommended list of email services after it was revealed the company disclosed IP information on a consumer to French authorities?
I would think this would be an important consideration in your assessment of the company.
Doesn't ProtonMail the company fight back on most inquiries and demands and they get and that French thing was just one of the ones they lost the ground on because France used Europol contacts to file the warrant Switzerland?
(Might be misremembering)
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.
This will do nothing for websites that are built with bundlers, since the site-specific code will be in the same file making it unique. Probably still catches a good few though.
I thought the whole point is to avoid sending HTTP requests to third party sites. At least for privacy. So in a way who cares if this sites give you all the content instead of just part of the content?
With caches now partitioned in all browsers, and CDN-hosting your code now strictly a worse option overall, it's becoming rarer and rarer for this extension to activate in my browser. I'm likely to uninstall it soon, which is a good thing.
One thing I don’t see mentioned here is the possibility of additional profiling by disabling web fonts. Doesn’t this make you more more unique as a user since very few people disable web 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.
The absence of info can’t be “additional” info. It’s a differentiating factor, but at best it’s on par with any other single info you would have sent through the font fetching request.
Arguably that single boolean characteristic (“fonts disabled”) is way less info than the dozens of characteristics you expose when fetching a font.
Disallowing font loading would be trivially used in fingerprinting. The non-boolean cascade of font fallbacks is too, but knowing that a user has a browsing context which should trigger one or more of those fallbacks, but doesn’t, is far more information than knowing that their browser behaves as expected.
How do you distinguish between passive failure and active disruption of your signal source? Unless you have yet another signal that can provide that information, then you cannot know that you have gained information by lack of original signal.
The assumption that the internet was working at the time of the original request so that the following font requests (a few milliseconds later) should also go through. There will be a few edge cases missed by this but I think it holds for such a large percentage of cases that they can just assume it.
The best middle-ground would be to spoof the most common set of fonts (probably Windows X default fonts?) as that would surely increase the number of probablistic matches over custom fonts / no fonts I can't imagine a large percentage of users (probably no browsers) completely disable web fonts and web font fingerprinting.
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.
The point is not to access third party tracking hosts (including web fonts and JS library servers) at all. The number of sites that implement first party server-side tracking to exchange data with other systems (like Imgur) is much lower than the number of sites that “simply added” fonts, libraries or counters from popular delivery networks.
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.
The server where the font is being loaded from would have no record of your activity. That's the but that improves privacy. I think there's an expectation that if you're concerned to this extent you'd have JS disabled as well, which would make it hard to detect whether you're displaying the font. Probably not impossible with CSS though.
I have been doing this since years but many sites become unusable with FontAwesome blocked. For the time being, I manually unblock fonts on absolutely necessary websites. Any hints on how I can unblock only fonts from FontAwesome, preferably from ublock origin?
I sometimes use svg's define symbol method `<defs>` (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/def...), you combine all the icons you use into one document that you load with display none and then reference those symbols anywhere else on the page using svg `<use>`.
This is a very shortsighted view from developer who forget a web page is not only a bunch of text. Designer also play an important role to provide the subtle design element that developers don't value.
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.
I’ve been blocking webfonts for a long time, and not being subjected to the design is mostly a feature. The only time it’s not is when instead of glyphs you get weird alt text like UP_ARROW.
Doesn't that depend on what the A/B test is measuring? A/B tests can measure the wrong thing. "Engagement" is often seen as a good thing in and of itself and is not investigated for errors.
True, but I believe the point is that the author is willing to sacrifice this for speed and privacy. Many who are privacy-conscious generally don't care about design and are prioritized on functionality and data safety. That's not to say design isn't important. I love apps and sites that follow fluid and modern UX, I just see it as second underneath privacy.
I have never felt a page read better with custom fonts instead of local system fonts. I suppose the reason is because most local system fonts prioritize readability to a fault, while custom fonts are chosen for aesthetics (and aesthetics don't necessarily relate to readability).
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.
A good design should have good fallback. Yes. A random example will be bbc.com, where BBC Reith fallback to Arial, Helvetica Free Sans and San serif.
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.
User experience is more than fonts. Most of the sites are unreadable at default browser zoom. Printing is almost impossible (i know, nobody prints those days). Gray on gray is the norm.
> Printing is almost impossible (i know, nobody prints those days)
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!
I get the feeling there are a lot of points of view in the above sub-thread that are using mutually exclusive definitions of "design".
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.
I don't think form and function should be mutually exclusive. Instead I want it to be a continuum, and I am trying to combat some of the view here who try to turn the function dial to 11.
With good balance, we should be able to create a world that is both aesthetic and functional.
A computer and any code that execute within one are tools, and tools must first and foremost serve to enable its user.
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.
> When it comes to remote fonts, they slow down page download and consequently load time.
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.
One of the functions of computers is to provide entertainment or evoke positive emotions. Many people use computers to explore and consume art. The reality is that people value how things make them feel. Even outside of entertainment, design and form can improve function when done right.
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.
Some of the most memorable things I've read over the past year have been on Gemini which falls back to the system font or one picked by the user. I'm not saying that there's no place for design, but if your choice of webfont is a single point of failure within it you have no business calling yourself a designer.
Font readability is the function of familiarity with the given font. So if the user clicks that checkbox to disable thirdparty fonts in the browser and use a familiar font everywhere, I think the user is right. :)
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.
Let me explain how it actually works. I visit the website, see horrible text (because designer expected everyone to use high DPI screen or specific rasterization/hinting back-end), click on the icon to disable fonts, and then, yes, I am able to read the text. Which is the only reason I am on this page. Not even the slightest thought about page design appears in my head, just temporary irritation from the obstruction.
But you do realise that you’re part of a very small, albeit vocal, minority here? Most people actually do value a coherent visual design, which can be and repeatedly has been proven in studies and A/B testing. This holds true, whether you like it or not.
Have you seen what “regular people” do in such situations? They squint, reach for their glasses, or look for the page zoom controls (which takes a lot of their time). It's almost as if you are happy that those people are not tech savvy enough to use a quick fix (for the problem someone else introduced). It's almost as if the whole industry is based on exploiting the lack of education and understanding of those “regular people”.
You can also A/B test the guillotine vs human executioner. The best option is not always a good option.
I certainly do value a coherent visual design! That's why it bugs me so much when designers mess with the standards, trying to make their little slices of the web look different from the rest.
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.
Most developers suck at design but most designers suck at development.
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.
This will have no effect on websites built with bundlers because the site-specific code will be in the same file, making it unique. But he probably still catches a few.
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.
> 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.
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.
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
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.
> There's a difference between something being provent theoretically possible in a laboratory environment and actually making it out in the real world.
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.
Sure, but I was specifically referring to a marketing context.
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.
>The entire browser profiling angle refers to something that does not currently exist, does not conceivably scale well
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
It's not bizarre if you realize that the decisions are not really in your hands. You are an engineer working in martech, you do what your company tells you to do and your company is motivated by profit, especially in martech. When your bosses decide it's time to start doing that, you will follow and if not, plenty of other engineers will. It's not like there are not dozens and dozens of examples of companies doing exactly that
I've spent 12 years in adtech and built 3 ad platforms from the ground up.
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.
How does a fingerprint remain stable over any reasonable period of time? How do you distinguish between different user accounts on the same device? How do you tie a fingerprint to your database of existing customers? How do you keep cookie data from conflicting with fingerprint data?
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.
> "How does a fingerprint remain stable over any reasonable period of time?"
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.
> Depends on how stable the signals being used are. Some can be very durable.
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.
These benefits are all secondary; the main reason I block web fonts is that I cannot find a way to make my browser render text legibly using web fonts. With web fonts disabled through uBlock Origin text is rendered readable and never a blurry mess. Some poorly made web sites display alien glyphs for navigation with web fonts disabled but that is a minor annoyance I can usually work around.
reply