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

The System Font Is Already Variable

Apple expanded San Francisco at WWDC 2022, and observers quickly noted the range of width and weight variations the font now offers. A natural question followed: how would web developers ever tap into those condensed, compressed, and expanded styles in CSS? Some suspected Apple might ship the whole thing as a single variable font. It turns out the built-in version on Apple devices already is one.

That discovery came indirectly. While experimenting with Roboto Flex and using system-ui as a fallback, applying font-variation-settings visibly affected the fallback font—which renders as San Francisco on a Mac. That effect only makes sense if the system font itself is variable. A quick demo confirms it: the system UI font responds to variation settings just like any other variable font.

There are caveats, starting with fallback behavior on non-Apple devices. That demo relies on the system-ui family name, not a downloaded font file, and there is no indication Apple plans to offer San Francisco as a web-servable font file. Additionally, close inspection reveals the system font contains 35 layout features—a notable detail for anyone digging into typographic controls.

The takeaway for web design: if your audience is on Apple hardware, the system font already offers the full variable spectrum, no font loading required. For everyone else, the usual fallback rules still apply.