Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Modern Font Stacks

modernfontstacks.com

Post reply on HN
Print view View original

11–20 of 80 posts

Re: Modern Font Stacks

#11

Post by leephillips »

krono wrote: post #10

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 e…

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

Re: Modern Font Stacks

#12

Post by ericyd »

I don't really get it, maybe my phone is just old but I saw exactly 3 fonts on this page: serif, sans, and mono. None of the other fonts are available on my phone so each category looked identical. Is this experience better on other devices? To me this was not a useful demo because it reinforced the fact that you need to ship fonts if you want users to see that specific font.

Re: Modern Font Stacks

#13

Post by strenholme »

Right now, the webfont CSS file for my website and blog is 89734 bytes in size. This is a very fast load, with well under a fraction of second of “font change flash” even on a 4g network in a third world country.

Point being, I don’t see the point of having a large font stack in the day and age of webfonts. To get a reasonable looking “flash of content”, I used https://screenspan.net/fallback which determined that Verdana (available everywhere except Android/ChromeOS and readily available even for Linux) has about the same metrics as Roboto Serif, the font I use a subsetted version of for my blog.

As an aside, I feel Roboto Serif is a very good open source Verdana replacement for the 2020s: It’s very easy to read and OFL licensed to boot.

Re: Modern Font Stacks

#14

Post by strenholme »

xd1936 wrote: post #9

I use this quite a bit! At the very least, if you're going to insist on using a custom font, having the rest of one of these stacks behind it can help guarantee that users with third-party resource blockers or other weird browsers get an experience closer to what you intend. For example, I always take Google Font's suggestion for Inter[1]: font-family: "Inter", sans-serif; and change it to: font-family: "Inter", syst…

https://screenspan.net/fallback is a good resource for finding out which system font looks most like the intended webfont, e.g. in my use case, Verdana has similar metrics to Roboto Serif.

Re: Modern Font Stacks

#15

Post by jsheard »

ericyd wrote: post #12

I don't really get it, maybe my phone is just old but I saw exactly 3 fonts on this page: serif, sans, and mono. None of the other fonts are available on my phone so each category looked identical. Is this experience better on other devices? To me this was not a useful demo because it reinforced the fact that you need to ship fonts if you want users to see that specific font.

I assume you're on Android? That's the weak link when it comes to system fonts, it only ships with a handful so many of these stacks end up looking identical in practice. If you go through to the GitHub page there's screenshots of how each stack gets rendered on each platform.

If you're not happy with what Android offers then a possible compromise would be to make a hybrid stack which tries Windows and Apple system fonts first, then falls back to a webfont if those aren't available.

Re: Modern Font Stacks

#16

Post by tln »

krono wrote: post #10

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 e…

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"

Re: Modern Font Stacks

#18

Post by krono »

tln wrote: post #16
krono wrote: post #10

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 e…

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"

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.

Re: Modern Font Stacks

#19

Post by myfonj »

krono wrote: post #10

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 e…

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

Re: Modern Font Stacks

#20

Post by mock-possum »

krono wrote: post #10

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 e…

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?

Post reply on HN