{"id":367361,"date":"2022-08-04T13:20:28","date_gmt":"2022-08-04T20:20:28","guid":{"rendered":"https:\/\/css-tricks.com\/?p=367361"},"modified":"2022-08-04T13:20:29","modified_gmt":"2022-08-04T20:20:29","slug":"actually-the-san-francisco-typeface-does-ship-as-a-variable-font","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/actually-the-san-francisco-typeface-does-ship-as-a-variable-font\/","title":{"rendered":"Actually, the San Francisco Typeface Does Ship as a Variable Font"},"content":{"rendered":"\n

Apple unveiled<\/a> an expanded version of its San Francisco system font at WWDC 2022. Then, last month, Jim Nielsen zeroed in on the font’s variations, explaining<\/a> how the font provides a spectrum of variations based on the width<\/strong> and weight<\/strong>. It’s a remarkable read if you haven’t checked it.<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

With all of these great new options, you might be tempted to use them in a web design. Chris was ogling over the expanded sets as well<\/a> over on his personal blog and pondered:<\/p>\n\n\n\n

But it\u2019s not year clear how we might tap into the condensed, compressed, and expanded varieties in CSS, or if there is even a plan to allow that. I suppose we can peek around Apple.com eventually and see how they do it if they start using them there.<\/p>

Doesn\u2019t this make perfect sense to construct as a variable font and ship the whole kit and kaboodle that way?<\/p><\/blockquote>\n\n\n\n

Turns out, yes. It does make perfect sense. Chris follows up in a new post<\/a>:<\/p>\n\n\n\n

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 (!!). <\/strong>See, I was derping around with Roboto Flex<\/a>, and had system-ui<\/code> as the fallback font, and I was noticing that during the FOUT, the font-variation-settings<\/code> I was using had an effect on the fallback font, which renders as San Francisco on my Mac. Which\u2026 unless I\u2019m daft\u2026 means that San Francisco is a variable font.<\/p><\/blockquote>\n\n\n\n

So, as for using it? Chris has a demo, of course:<\/p>\n\n\n\n