Actually, the San Francisco Typeface Does Ship as a Variable Font

I was recently fawning over Apple’s recently Expanded San Francisco Typeface. San Francisco really looks nice in both the compressed and expanded¹ versions, across all the weights. So I ended with:

Doesn’t this make perfect sense to construct as a variable font and ship the whole kit and kaboodle that way?

Yes, is the answer to that rhetorical.

I didn’t think we’d actually get it. I think variable fonts are super cool but I get the impression that industry-wide they are considered niche still. Perhaps not something Apple wants to deal with supporting, documenting, versioning, etc.

But just yesterday I randomly stumbled across the fact that the built-in San Francisco font (on the Apple devices that have it built-in) is already variable (!!). See, I was derping around with Roboto Flex, and had system-ui as the fallback font, and I was noticing that during the FOUT, the font-variation-settings I was using had an effect on the fallback font, which renders as San Francisco on my Mac. Which… unless I’m daft… means that San Francisco is a variable font.

Using SF

Assuming you have the prerequisites, this will work:

h1 {
  font-family: system-ui, sans-serif;
  font-variation-settings: 
    "wght" 900,
    "wdth" 700;
}Code language: CSS (css)

I have access to the weight and width axes here, meaning the same font can do some pretty drastically different things:

Prereqs?

• A browser that supports the font-family of system-ui. I know you could also use -apple-system, BlinkMacSystemFont in the past, so maybe that’s useful on older browsers, not sure.
• A Mac that has San Francisco installed by default. Technically that was pretty far back in 2015’s El Capitan I think but I sorta doubt the variable stuff worked back then. This is probably Monterey stuff.

On my Monterey Mac, it works across Safari, Chrome, and Firefox, as well as on my iOS 15 iPhone. So decent support where you would expect it.

Fallbacks

SF will probably never work on the web on a Windows machine. It will probably never work on the web on an Android device. Unless Apple ships it as a .woff2 for anyone to use, which… I wouldn’t hold your breath. You might be able to extract/convert something from the downloads, but I’d be nervous that breaks some kinda implied license.

If you’re interested in using this on the web, you really need to think about fallbacks. I’d call it progressive enhancement, but it feels weird to call not loading a custom font file the enhancement and loading a custom font file the default behavior. But hey, there is a first time for everything. I haven’t looked into how you would test for support.

• Maybe the Font Loading API had something?
• Maybe something like document.fonts.check("12px system-ui"); could help?
• Maybe you could get away with @supports (font-variation-settings: "wght" 900)?

Best of luck, if you wanna do something really production-y. Lemme know what you do.

Axes

So are "wght" and "wdth" the only axes? Those seem like the most useful ones, but it occurred to me that because I have the fonts “installed”, could find the font files themselves.

Then drop them right onto the ol’ Wakamai Fondue, the greatest named site on the internet. Somehow, it doesn’t turn up wdth, but it does turn up wght and more:

Additionally, there is at least "opsz" (Optical Size from 17 to 28) and "YAXS" (Some kind of weird horizontal thickness thing?? Changing it looks like 🤮 — from 400 to 1000).

Plus, a boatload of “layout features”:

• calt
• case
• ccmp
• cv01
• cv02
• cv03
• cv04
• cv05
• cv06
• cv07
• cv08
• cv09
• cv10
• dnom
• frac
• liga
• locl
• numr
• pnum
• ss01
• ss02
• ss03
• ss05
• ss06
• ss07
• ss12
• ss13
• ss14
• ss15
• ss16
• ss17
• subs
• sups
• tnum
• kern

Those you use in CSS like:

font-feature-settings: "ss01";Code language: JavaScript (javascript)

That particular one affects how a “69” pair is rendered (nice), and the others I tested worked as well.

Variable font indeed!

---

¹ I love how you can just stretch it manually to make the expanded version.