[krono]

An example of something to keep in mind with this technique is that you might actually end up causing the browser to render a different font than either you or the user intended.

For a practical example:

Environment

  - Latest Firefox on Windows 10.
  - Manually installed fonts 'Cascadia Code' and 'JetBrains Mono NL'.
  - Firefox default 'monospace' font set to 'JetBrains Mono NL'.

Setting `font-family: monospace;` would end up rendering 'JetBrains Mono NL' - the user-configured default monospace font.

Setting `font-family: 'Cascadia Code', monospace;` would also render 'JetBrains Mono NL' - privacy features prevent pages from querying non-standard system fonts and this will also be reflected as a console warning message: 'Request for font "Cascadia Mono" blocked at visibility level 2 (requires 3)".'

Now, if you were to use he "Monospace Code" font stack listed on this page `font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;`, you will render... Yup, 'Consolas'!

  1. `ui-monospace` - remains unsupported by Firefox which is lame (would also render 'Consolas').

  2. `Cascadia Code` - see above, access denied because it isn't natively available on Windows 10 (also, coding ligatures... more like illigatures, amirite?).

  3. `Source Code Pro` - skipped due to unavailability.

  4. `Menlo` - skipped due to unavailability.

  5. `Consolas` - next option in line, this one is available and is the one that will be chosen.

  6. `DejaVu Sans Mono`  - skipped, font already determined.

  7. `monospace` - skipped, font already determined.

These modern font stacks suck. Please, if you want to render font and it has to be something specific, then use an actual web font and simply fall back to the default 'monospace' which is controlled by the user.

[myfonj]

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".

It is not default, and explicitly indicates this kind of outcome can potentially happen. But truly agree that the situation here is suboptimal in all aspects.

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.

[0] https://userstyles.world/style/23838

[hu3]

> 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.

[Kwpolska]

IIRC, Safari has this limitation with rendering only system fonts and it cannot be disabled.

[chrismorgan]

> 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.

[tln]

I don't think web pages should stay away from font stacks just to handle people with changed esoteric browser prefs. If you as a user want to see different fonts everywhere, you'll need invasive tools that block font face etc. Or Firefox (where this message comes from) has a setting to "Allow pages to choose their own fonts, instead of your selections above"

[krono]

These font stacks don't handle anything at all, they just throw a bunch of common typeface names at the wall and they can't even tell what sticks because it's so random. All the while, the user might have a prefered fallback font set that they prefer over any of the ones in the font stack - and even if that isn't the case, simply using 'monospace' as the only fallback will render the default monospace font anyway.

I disagree with the notion that common browser configuration options available for users to change through the main/general browser settings UI would in any way be esoteric. It is wholly irrelevant anyway.

The setting you mention has no effect in the case I outlined above - Even with "Allow pages to choose their own fonts, instead of your selections above." enabled, the same results are observed.

[myfonj]

> esoteric browser prefs

That hurts. I see where you are standing, and can confirm you expressed opinion of the contemporary majority of browser users, but man, how sad it that. The attitude diverged by a light years, when "Setting preferred fonts for generic font families" is now "esoteric". (Web) browsers ("user agents") came to existence with these capabilities in mind, and even now are build around the principle of "preferences reconciliation" between defaults, author and user (as opposed to simple "display what author dictates"). And default font choice is probably the very first aspect it ever had to handle.

(Or were you referring to some other "pref"?)

[toast0]

> If you as a user want to see different fonts everywhere, you'll need invasive tools that block font face etc.

You have it backwards. These tools allow you to see the same fonts everywhere.

Just because the page author thinks lowercase f should look out of place doesn't mean I should have to see them like that. :p

[mock-possum]

Maybe it’s because I’m already familiar with how fonts are chosen in the browser, but - how does your example of using Monospaced Code demonstrate “render a different font than either or the user intended?” It looks to me like the font renders exactly as intended - the rules are applied, the series of options are considered in turn until the first one qualifies and that one is used.

How else would one expect a series of fallbacks like this to work?

[chrismorgan]

> 1. `ui-monospace` - remains unsupported by Firefox which is lame (would also render 'Consolas').

Nothing but Apple operating systems even has a concept matching ui-monospace/ui-sans-serif/ui-serif/ui-rounded. And no one but Apple has implemented them in their browsers. I don’t believe they should be included in any standard: the very concept is not, in practice, cross-platform.

Even system-ui is super dodgy to use. In practice people have been using it as a proxy for a possibly-prettier sans-serif, but that’s just not what it is. The vast majority of its usage is inappropriate.

[leephillips]

Your example is instructive, but I fail to see what the problem is. This is working as intended, no?

[krono]

It already works as intended. If the intent is to render a default system font, then let the system handle that by simply applying 'monospace'.

[andix]

It's exactly what the manual specifies: https://github.com/system-fonts/modern-font-stacks?tab=readm...

Windows 11+ -> Cascadia Code Windows 7+ -> Consolas

[michaelcampbell]

> Please, if you want to render font and it has to be something specific

Is that what this article is trying to achieve? I really like my car, but it's not what I'd reach for to haul a load of 4'x8' plywood home.

[monooso]

I don't understand your comment.

If you don't want to render a specific font from a given list, the font stack is redundant. If you do want to render a specific font from a given list, the font stack does not work (for the reasons given).

[weinzierl]

Interesting.

"privacy features prevent pages from querying non-standard system fonts"

Do you know if and where it is documented which fonts various browsers consider "standard" on which platform? I am afraid I know the answer but one can hope.

[pixl97]

Microsoft publishes this, I don't know about others.

https://learn.microsoft.com/en-us/typography/fonts/windows_1...

[_qua]

How do I make sure my browser doesn't "protect" me in such a way?

[unscaled]

I'm not sure why would you put "protect" in scare quotes here. This protection against fingerprinting is very real. Having any installed fonts that didn't come with the OS (and that includes fonts that are installed by other programs), makes your computer a lot more easy to fingerprint and track. Not everybody is interested in this protection, but this protection is very real.

It also doesn't seem to be enabled by default, since it tends to break some sites, as explained above. If you want to disable prevent Firefox from doing that, just don't set "Enhanced Tracking Protection" to Strict. You can even go for full Custom mode and enable "Protection from Suspected Fingerprinters" (which blocks some fonts as described by GP) only for private windows.