Hacker News Reader

Comment by ayushnix | Hacker News Reader

> ① Use Firefox. Other browsers may have something similar; dunno; but Firefox is good anyway. ② Settings (about:preferences) → Fonts → Advanced → untick “Allow pages to choose their own fonts, instead of your selections above”.

I've been doing this for several years now and I love that Firefox can do this and Chromium can't. However, as you've mentioned, icons break on several websites including DuckDuckGo and rust mdbook (the search icon is replaced as "fl"). In addition, several websites assume that their monospace web font will always load and when it doesn't, code blocks are displayed in sans-serif fonts which is a huge turn off.

I guess both of these issues happen because people assume everyone's using Chromium web browsers?

View on HN

Nah, it’s nothing to do with Chromium. These things can break in any environment, and you can deliberately break these things in any browser, even if Chromium may not have first-class support for the concept; in uBlock Origin, for example, the rule “no-remote-fonts: * true” (or the filter “$font”) kills web fonts, and, well, I guess you can uninstall all your local fonts or something.

Icon fonts are pretty much an obsolete technique: they were the pragmatic choice for a few years when SVG support was insufficient (most notably for old versions of IE), but they were known* to have accessibility problems, and so now that SVG support is adequate, the icon font technique should be replaced in all cases.

For font-family declarations lacking an appropriate generic fallback family, that’s simple developer error because they don’t know how things are supposed to be done, and that all other families are unreliable—it’s not just people that deliberately disable them like us, but also that not all systems will have a font of a given name, and that web fonts may fail to load because networks are unreliable.

So in both cases, it's just poor web design. This is disappointing.

I could maybe forgive the use icon fonts (Google websites end up breaking the most, android's documentation website for example) but it's unforgivable to write `pre code { font-family: my-random-webfont }`.

Something I can add since I started blocking remote fonts completely in uBlock Origin a couple of days ago: I’ve been noticing lots of broken icon fonts now where I hadn’t before; my working hypothesis is that under the flag we’ve been talking about, Firefox excepts Private Use Area code points and happily loads web fonts for those specific cases. Thus, the cases we’ve been observing of broken icon fonts are where the fonts didn’t use the PUA, whether they tried to choose decent fallbacks (like DuckDuckGo), or used the ligation technique (Material Icons), or just did something weird for no obvious reason.

Perhaps you can fix the broken websites with userContent.css [1][2][3]

[1]: https://kb.mozillazine.org/UserContent.css

[2]: https://superuser.com/q/318912

[3]: https://www.userchrome.org/how-create-userchrome-css.html

userContent.css is frightfully inconvenient, since you have to restart the browser for it to take effect. I recommend (and use) the extension Stylus instead, which uses an inferior technique (the injected styles aren’t prioritised correctly as user styles), but can be tweaked more easily and as you go.

I usually test my preferences with Stylus, and once I found a combination I'm comfortable with, it gets perpetuated in the userContent.css for the technical reason you mentioned.

Reply on news.ycombinator.com