This is excellent analysis, but I think you've forgot to mention one particular detail in your environment description:
- Firefox Browser Privacy Enhanced Tracking Protection setting changed to "Strict".
Also maybe worth noting that we can always force our (three) font faces everywhere simply by unchecking the "Allow pages to choose their own fonts" in settings. Yes, this is nuclear option, but I can attest that I use it time to time, and it is quite usable.
BTW, I have somewhat softer workaround that interestingly makes the (local) Cascadia on modernfontstacks work even in the Strict Tracking Protection mode: I have a "userstyle" [0] (more precisely userCSS in Stylus) that "remaps", among other things, "Consolas" to a @font-face of the same name but loading `src: local("Cascadia Mono")` instead. Not sure why exactly this circumvents that (I don't think that Stylus-injected styles have more privileges than page styles), but I am glad it works nonetheless.
> Allow pages to choose their own fonts" in settings. Yes, this is nuclear option, but I can attest that I use it time to time, and it is quite usable.
Does this nuke icon fonts? I presume yes.
Good question! Actually (to my minor dismay): not completely. Disabling "font support" in Firefox surprisingly still has a hatch for "well-known" icon fonts, with intention to prevent "blind" icons in webpages. I believe it is driven by the pref
that contains "FontAwesome" and (Google) Material Icons and Symbols (many, presumably all, variants). So to truly disable all "non-preferred" fonts, we have to both wipe that pref and also change for the to zero. But that's what the GUI checkbox controls, so no need to go to about:config for this one.Icon fonts are bad for accessibility. Better to use SVG graphics and provide alt text for screen readers.
How so? aria-label= and role= attributes exist, this is not 1999.
What’s bad for usability is using icons on their own. Using icons with visible labels is the best practice among people who actually want their software to be usable.
And of course “bad for usability” becomes absolutely catastrophic for a11y.
For those who prioritize aesthetics over usability and use icons alone though, there are at least a dozen methods to make assistive tech read the names of your icon buttons. Something as simple as aria-label is one way.
IIRC, Safari has this limitation with rendering only system fonts and it cannot be disabled.
> Also maybe worth noting that we can always force our (three) font faces everywhere simply by unchecking the "Allow pages to choose their own fonts" in settings. Yes, this is nuclear option, but I can attest that I use it time to time, and it is quite usable.
Occasionally I deliberately trial major changes for a week or two. Sometimes I revert, other times I stay. I turned font selection off in this way in early 2020, and never went back, it made the web so much better.
Out of the box, Firefox still loads fonts with certain names, to avoid breaking icon fonts. After maybe six months I decided to nuke that with blocking all fonts in uBlock Origin, and although it made some things uglier, and Material Icons is ridiculously stupid in practice (frankly achieving almost the precise opposite of its stated intent for using ligation) it took until this year before I encountered an actual breakage (a couple of sites not realising document.fonts.load() can throw).
I encourage others to turn off font selection, though I wouldn’t encourage most to block web fonts altogether in the way I decided to.
I also urge developers to shun icon fonts: they were always a bad idea, a dodgy hack, and the time when they had meaningful justifying qualities is now long past.