Apple unveiled an expanded model of its San Francisco system font at WWDC 2022. Then, final month, Jim Nielsen zeroed in on the font’s variations, explaining how the font supplies a spectrum of variations based mostly on the width and weight. It’s a exceptional learn should you haven’t checked it.
With all of those nice new choices, you is perhaps tempted to make use of them in an internet design. Chris was ogling over the expanded units as effectively over on his private weblog and contemplated:
Nevertheless it’s not yr clear how we would faucet into the condensed, compressed, and expanded varieties in CSS, or if there’s even a plan to permit that. I suppose we will peek round Apple.com ultimately and see how they do it if they begin utilizing them there.
Doesn’t this make good sense to assemble as a variable font and ship the entire equipment and kaboodle that means?
Seems, sure. It does make good sense. Chris follows up in a new put up:
However simply yesterday I randomly stumbled throughout the truth that the built-in San Francisco font (on the Apple gadgets which have it built-in) is already variable (!!). See, I used to be derping round with Roboto Flex, and had
system-uibecause the fallback font, and I used to be noticing that in the course of the FOUT, thefont-variation-settingsI used to be utilizing had an impact on the fallback font, which renders as San Francisco on my Mac. Which… until I’m daft… signifies that San Francisco is a variable font.
So, as for utilizing it? Chris has a demo, after all:
There are some gotchas to all this, essentially the most important being fallbacks for non-Apple gadgets. In spite of everything, that demo is just calling system-ui for the font household — it’s not telling the browser to obtain a font file or something and who is aware of if Apple is gonna ever ship a variable font file we will serve up as an precise customized internet font.
The opposite attention-grabbing factor? Chris did some sleuthing and counted 35 structure featured included in that system font. Go learn the remainder of the put up to see ’em all (and to get ol’ dose of Chris-isms — I do know I miss them!).
