Comment by chrismorgan | Hacker News Reader

Comment by chrismorgan | Hacker News Reader

Parent Full thread

I disagree with much of these stacks. I would scrap at least Avenir Next, Avenir, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Arial, Apple Garamond, Times New Roman, Droid Serif, Times, Source Serif Pro, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Monaco, Liberation Mono and Lucida Console, and probably a couple more, for one of three reasons: that the family is superfluous, for an obsolete platform, or inferior.

—⁂—

But as a consumer of the web, I personally don’t actually need to worry about these things any more, because I have my browser set to use my chosen sans-serif, serif and monospace faces (Equity, Concourse, Triplicate), and you can too! ① 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 started doing this a few months back as a week-long experiment, and found it so significantly improved the web that I’m not going back. (It did feel a little strange for a few days, as Concourse is a somewhat narrower sans-serif than the likes of Arial, but that’s about the specific fonts that I chose. Now it’s just perfectly natural.)

I have experienced a very few icon-font related breakages, about which I wrote yesterday at https://news.ycombinator.com/item?id=31540234, but it’s surprisingly few given how popular the technique was for a few years. I also get a fair bit of bonus unintended serif from people that have neglected to add a generic font family fallback, or misspelled it (e.g. sans or "sans-serif" (quoted) instead of sans-serif), so that it falls back to the global default, which I have left as a serif.

> ① 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?

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