Last updated 0 minutes ago
At my job at Camden Council, we recently updated our fonts to have character disambiguation, so you can tell your upper case I (for "isn't it") from your lower case l (from "look, lower case"), amongst other improvements. We did this by enabling font-feature-settings across the codebase for the font we use, Inter.
Later, whilst testing print improvements for the site, a few of my Windows-using colleagues noticed something weird. The font wasn't Inter, and also was strange and unsettling didn't look like any of the fallback fonts.
It turned out I could replicate it on other sites by having the font-feature-settings we were using enabled in a Windows VM.
do any CSS people know why in Windows browsers (defs in Chrome & Edge at least) enabling `font-feature-settings: ss02` it changes to a font unrecognisable as the font picked, even if you use a web font or something that shouldn't have it?
will try and search in spec, on mac it seems to ignore it.
— Olu Niyi-Awosusi (@olu.online) November 6, 2025 at 3:06 PM
I was a bit confused; why would the settings effect a font that didn't have the OpenType features? At this point I suspected it was a bug and started looking at the specs for CSS, but people on Bluesky eventually helped me discover that it was to do with different system versions of Arial.
Arial does have sso2 (stylistic set 2) feature settings capability in some versions of the variants of it that exist. It does in the Windows 11, at version 7.0.0. It doesn't exist on MacOS' version, which is 5.01.2x.
I had never considered that system fonts would be different versions - beyond them simply not existing, anyway - as I was probably putting too much mental weight on the idea of a "web safe" font meaning "safe" as in "exactly the same everywhere". Reading more about them it seems like "web safe" only really means "will probably (>95% chance) exist on the user's device". Another fun spec dive is brewing to learn more about web safe fonts!
To solve the issue, we moved the font-feature-settings declaration to where the font is imported, into the @font-face rule. I assumed there were ways to say "if this font exists, apply this setting", but apparently not!
Have you had any weird CSS things recently?
If you liked this post, please:
- message, email, or follow me online
- tip me
- share this post
- follow my posts by rss or atom
- subscribe to my newsletter
- press the toast button to recommend it to other people on bearblog
- comment!
Previous | {{next_post}}