4 ms·

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

by krono 1y ago

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.

leephillips 1y ago
Your example is instructive, but I fail to see what the problem is. This is working as intended, no?
- andix 1y ago
  It's exactly what the manual specifies: https://github.com/system-fonts/modern-font-stacks?tab=readme-ov-file#monospace-code https://github.com/system-fonts/modern-font-stacks?tab=readm... Windows 11+ -> Cascadia Code Windows 7+ -> Consolas
  - tracker1 1y ago
    I tend to add Inconsolata (open Consolas-like typeface) as well as a fallback... since it's closer to what I'm intending if going for the Cascadia Code as a default... in case it's installed in non-windows or otherwise those fonts aren't present.
- krono 1y ago
  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'.
  - leephillips 1y ago
    That is clearly not the intention, else there would be no reason to bother with font stacks. The intention is to list a set of ranked preferences, implemented as fallbacks, that best express the designer’s vision for the site, while avoiding font downloading. In your example, presumably the designer thinks that Consolas works better than JetBrains Mono NL.
    - krono 1y ago
      Yes, I see what you mean, but if that's really the intent, then having only this font-family rule isn't sufficient. For that argument/reasoning to hold up, it would have to be accompanied by metrics adjustments to compensate for the massive differences between some of the listed fonts in these stacks.
      - leephillips 1y ago
        Absolutely true. In fact (and thank you for getting me to think about this), font stacks without metric adjustments don’t really make much sense, do they? (Unless confined to a list of fonts that are very close metrically, which they never are.)
tln 1y ago
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 1y ago
  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.
  - reaperducer 1y ago
    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. Anytime someone on HN doesn't understand CSS, they throw up their hands and call it random. Just because you don't understand what's happening doesn't mean it's random. I don't understand the SAM76 programming language, but I don't pretend that !%ii,*,1,1,!%mu,*,%F,%su,*,1//////////= is "random." the user might have a prefered fallback font set that they prefer over any of the ones in the font stack Great! Then the user gets his preferred font, as requested, instead of the one the page specified. Sounds like a win, so I'm not sure what you're complaining about. I expect you'd also complain if the web page overrode the user's choice. 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. Of the six billion or so people on the web, the number of people manually overriding fonts isn't even a rounding error. It's not even a rounding error's rounding error. Get out of the tech bubble.
myfonj 1y ago
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 https://userstyles.world/style/23838
- hu3 1y ago
  > 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.
  - myfonj 1y ago
    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 browser.display.use_document_fonts.icon_font_allowlist 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 browser.display.use_document_fonts to zero. But that's what the GUI checkbox controls, so no need to go to about:config for this one.
  - dhosek 1y ago
    Icon fonts are bad for accessibility. Better to use SVG graphics and provide alt text for screen readers.
mock-possum 1y ago
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?
weinzierl 1y ago
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 1y ago
  Microsoft publishes this, I don't know about others. https://learn.microsoft.com/en-us/typography/fonts/windows_10_font_list https://learn.microsoft.com/en-us/typography/fonts/windows_1...
_qua 1y ago
How do I make sure my browser doesn't "protect" me in such a way?
- unscaled 1y ago
  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.
chrismorgan 1y ago
> 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.
michaelcampbell 1y ago
> 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 1y ago
  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).

by krono 1y ago

leephillips 1y ago

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

andix 1y ago
It's exactly what the manual specifies: https://github.com/system-fonts/modern-font-stacks?tab=readme-ov-file#monospace-code https://github.com/system-fonts/modern-font-stacks?tab=readm... Windows 11+ -> Cascadia Code Windows 7+ -> Consolas
- tracker1 1y ago
  I tend to add Inconsolata (open Consolas-like typeface) as well as a fallback... since it's closer to what I'm intending if going for the Cascadia Code as a default... in case it's installed in non-windows or otherwise those fonts aren't present.
krono 1y ago
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'.
- leephillips 1y ago
  That is clearly not the intention, else there would be no reason to bother with font stacks. The intention is to list a set of ranked preferences, implemented as fallbacks, that best express the designer’s vision for the site, while avoiding font downloading. In your example, presumably the designer thinks that Consolas works better than JetBrains Mono NL.
  - krono 1y ago
    Yes, I see what you mean, but if that's really the intent, then having only this font-family rule isn't sufficient. For that argument/reasoning to hold up, it would have to be accompanied by metrics adjustments to compensate for the massive differences between some of the listed fonts in these stacks.
    - leephillips 1y ago
      Absolutely true. In fact (and thank you for getting me to think about this), font stacks without metric adjustments don’t really make much sense, do they? (Unless confined to a list of fonts that are very close metrically, which they never are.)

tln 1y ago

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 1y ago
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.
- reaperducer 1y ago
  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. Anytime someone on HN doesn't understand CSS, they throw up their hands and call it random. Just because you don't understand what's happening doesn't mean it's random. I don't understand the SAM76 programming language, but I don't pretend that !%ii,*,1,1,!%mu,*,%F,%su,*,1//////////= is "random." the user might have a prefered fallback font set that they prefer over any of the ones in the font stack Great! Then the user gets his preferred font, as requested, instead of the one the page specified. Sounds like a win, so I'm not sure what you're complaining about. I expect you'd also complain if the web page overrode the user's choice. 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. Of the six billion or so people on the web, the number of people manually overriding fonts isn't even a rounding error. It's not even a rounding error's rounding error. Get out of the tech bubble.

myfonj 1y ago

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 https://userstyles.world/style/23838

hu3 1y ago
> 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.
- myfonj 1y ago
  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 browser.display.use_document_fonts.icon_font_allowlist 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 browser.display.use_document_fonts to zero. But that's what the GUI checkbox controls, so no need to go to about:config for this one.
- dhosek 1y ago
  Icon fonts are bad for accessibility. Better to use SVG graphics and provide alt text for screen readers.

mock-possum 1y ago

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?

weinzierl 1y ago

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 1y ago
Microsoft publishes this, I don't know about others. https://learn.microsoft.com/en-us/typography/fonts/windows_10_font_list https://learn.microsoft.com/en-us/typography/fonts/windows_1...

_qua 1y ago

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

unscaled 1y ago
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.

chrismorgan 1y ago

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

michaelcampbell 1y ago

> 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 1y ago
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).