Which… unless I’m daft… means that San Francisco is a variable font. There are two types of font family names: family-name - The name of a font-family, like 'times', 'courier', 'arial', etc. If the browser does not support the first font, it tries the next font. The font-family property can hold several font names as a 'fallback' system. The San Francisco font is a sans-serif typeface designed by Apple Inc. Chris follows up in a new post:īut 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. The font-family property specifies the font for an element.

font-family-sans-serif: // Safari for OS X and iOS (San Francisco). I suppose we can peek around eventually and see how they do it if they start using them there.ĭoesn’t this make perfect sense to construct as a variable font and ship the whole kit and kaboodle that way? Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated. So, you can't use it, unless you only use it on your website to showcase your iOS/OSX app, in which case it is free to use. Chris was ogling over the expanded sets as well over on his personal blog and pondered:īut it’s 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. The foregoing right includes the right to show the Apple Font in screen shots, images, mock-ups or other depictions, digital and/or print, of such software products running solely on iOS or OS X. With all of these great new options, you might be tempted to use them in a web design. It’s a remarkable read if you haven’t checked it. Then, last month, Jim Nielsen zeroed in on the font’s variations, explaining how the font provides a spectrum of variations based on the width and weight. Apple unveiled an expanded version of its San Francisco system font at WWDC 2022.

San francisco html font family