15 ms·
Blocking web fonts for speed and privacy (2016)
- dreadlordbone 4y agoMirror: https://archive.ph/RxqoH https://archive.ph/RxqoH (site seems to be chugging already)
- Proven 4y ago
- DanAtC 4y agoiOS' Lockdown Mode blocks web fonts. Sad to see how many sites still use icon fonts instead of SVGs.
- asddubs 4y agothey 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
- toastal 4y agoYou can literally do all of that with SVGs sprites when the fill is set to currentColor.
- asddubs 4y agoOnly with inline svgs, not if they're included via <img>, I believe.
- toastal 4y agoYou can't inline a font as an <img> either?? There are performance benefits to <img>, but generally people recommend <use> for SVGs.
- asddubs 4y agothe point I made in my original post was that a font is already an external resource and doesn't have to be intermingled with the rest of the code.
- behnamoh 4y agoThe method in the article also turns Reddit's upvote/downvote buttons into squares (unknown characters).
- userbinator 4y agoYet HN's vote buttons are unaffected.
- bobbylarrybobby 4y agoAs someone who knows nothing about this: what is wrong with icon fonts?
- iampims 4y agoIt’s a font, so it has to be loaded. SVGs can be inlined, so no additional, and possibly external, requests needed.
- ayushnix 4y agoThis is how some websites with icon fonts look when web fonts are disabled https://0x0.st/oOUq.png https://0x0.st/oOUq.png (nullprogram.com) https://0x0.st/oOUb.png https://0x0.st/oOUb.png (https://developer.android.com/training/basics/firstapp 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. https://microblog.ayushnix.com/font-weight-insanity/ https://microblog.ayushnix.com/font-weight-insanity/
- megous 4y agoFont choice is a user's choice. https://megous.com/dl/tmp/830725ae5a555c87.png https://megous.com/dl/tmp/830725ae5a555c87.png 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.
- antihero 4y agoI'm not sure about browsers but in React Native, icon fonts are far more performant.
- kmeisthax 4y ago>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.
- chii 4y ago> Google Web Fonts library preloaded in it 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).
- kmeisthax 4y agoYes, 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.
- userbinator 4y agoI find it somewhat amusing that this is one setting that IE has always had in its GUI: https://i0.wp.com/improveandrepeat.com/wp-content/uploads/2018/03/IE_SecuritySettingsInternetZone.png?ssl=1 https://i0.wp.com/improveandrepeat.com/wp-content/uploads/20... 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
- chrismorgan 4y agobrowser.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.
- deleted 4y ago[deleted]
- vasili111 4y agoUblock Origin can easily block web fonts. Also, you can set this setting differently for each website.
- Underphil 4y agoWhich is exactly what the article said.
- molticrystal 4y agoIn 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. https://codeberg.org/nobody/LocalCDN/ 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 More complete lists can be found in the source code, there are a lot of them: https://codeberg.org/nobody/LocalCDN/src/branch/main/core/mappings.js https://codeberg.org/nobody/LocalCDN/src/branch/main/core/ma... https://codeberg.org/nobody/LocalCDN/src/branch/main/core/resources.js https://codeberg.org/nobody/LocalCDN/src/branch/main/core/re...
- pbronez 4y agoAnother option for this is https://decentraleyes.org/ https://decentraleyes.org/
- molticrystal 4y agoLocalCDN actually started as a fork of decentraleyes with much more included and is updated more often.
- dngray 4y agoDecentraleyes resources are hugely out of date to the point where it does nothing.
- vmoore 4y agoTried 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.
- upbeat_general 4y agoOne 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.
- makeitdouble 4y agoThe 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.
- eyelidlessness 4y agoDisallowing 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.
- checkyoursudo 4y agoHow 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.
- bruce343434 4y agoThe 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.
- freediver 4y agoThis feature is built-in in Orion browser.
- encryptluks2 4y agoYou can also use Chrome policies to block them. I love using Chrome policies to manage my system-wide settings.
- qart 4y agoI 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?
- curlftpfs 4y agoBy domain or filename. Another reason to not use icon fonts. https://github.blog/2016-02-22-delivering-octicons-with-svg/ https://github.blog/2016-02-22-delivering-octicons-with-svg/
- toastal 4y agoAgreed. It's been like 7 years since icon fonts were recommended and it's a real shame I still regularly see people do it today.
- charlieyu1 4y agoI mean the outdated tutorials still suggest icon fonts. What’s a good alternative?
- c12 4y agoI sometimes use svg's define symbol method `<defs>` (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/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>`.
- termin4l 4y agoUse graphics for icons. For a11y reasons, include a text alternative, like the alt attribute on <img> elements or adding a <title> in your <svg>. https://css-tricks.com/accessible-svgs/ https://css-tricks.com/accessible-svgs/
- 4y ago
- phantomathkg 4y agoThis 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.
- qsort 4y agoIt's called User-Agent, not HipsterDesigner-Agent. My browser, my connection, my rules.
- eloisius 4y agoI’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.
- unmole 4y ago> provide the subtle design element that developers don't value Does anybody apart from designers actually care?
- jozzy-james 4y agowith the a/b testing we’ve done in our admittedly niche market - yeah it matters
- ravenstine 4y agoDoesn'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.
- daqnal 4y agoTrue, 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.
- iamcrazyyounus 4y agoThis 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.
- Iamsaumya 4y ago"Blocking Web Fonts for Speed" but how do you install uBlock origin in mobile chrome?
- deleted 4y ago[deleted]
- 4mitkumar 4y agoYou use mobile Firefox
- bornfreddy 4y agoTwo steps: 1) install Firefox mobile and 2) install uBlock Origin. Optional: 3) uninstall Chrome. :)
- dhritzkiv 4y agoThis published on a site with five web font files: lato, lato bold, playfair display, oswald, and ionicons. Also, title likely needs a "(2016)"
- nuker 4y agoThe main privacy breach is Referrer HTML header in request for fonts, which feeds browsing history to Google.
- ccouzens 4y agoThe original site can set 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/Referrer-Policy https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Re...
- koplt 4y ago
- tflinton 4y agoSo you don't want nice things... Web fonts, are nice things.
- legitster 4y ago> 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.
- megous 4y ago> often only things that lets someone know they are being MitM attacked or phished is when the corporate branding feels "off" 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.
- onion2k 4y agoThe 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.
- ffpip 4y ago
- lapsis_beeftech 4y agoThese 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.
- tux 4y agouBlock Origin 1.39+ has this options in settings: "Block remote fonts" and "Disable JavaScript" (disabled by default)
- kasabali 4y agoFont blocking setting has been there long before that, considering even the original article from 2016 mentions it.