Unfortunately, it’s very poorly documented. The markup looks like this:įont-family: -apple-system, 'Helvetica Neue', 'Lucida Grande'

It’s my guess that they’d like to bring these features to the web, as well.Īs a part of this abstraction, there’s now a new generic family name: -apple-system. Apple is also working on font features, such as selectable “6” and “9” glyphs or non-monospaced numbers. The motivation for this abstraction is so the operating system can make better choices on which face to use at a given weight. To determine this name, you need to dig around in the font instances returned by NSFont or UIFont it’s not easy by design. These private names all begin with a period: the Ultralight face for San Francisco is named “.SFNSDisplay-Ultralight”. They’ve also stated that any private names are subject to change. Unfortunately, on a fresh install of OS X 10.11 (El Capitan) there’s no San Francisco font installed:īut it’s the system font, so how is this possible?Īpple has started abstracting the idea of a system font: it doesn’t have a publicly exposed name. Something like this could be used to get San Francisco:įont-family: 'San Francisco', 'Helvetica Neue', 'Lucida Grande'

Traditionally, we’ve specified fonts explicitly. It turns out that’s not a simple thing to do. We’ll soon be faced with a lot of surrounding content that’s displayed in San Francisco and will need ways to specify that same font in our CSS. Think about how out of place an app feels when it displays Sparkle release notes in Lucida Grande while running on Yosemite. In these contexts, matching the content to what the customer sees in their surrounding environment makes a big impact on the user experience. Many times these pages are embedded in our apps and manage things like remote settings or documentation. We first saw the San Francisco font on the Apple Watch: we’ll soon be seeing it on all of Apple’s devices.Īs a developer, there are often cases where we need to use the system font on web pages. Thanks!Īpple is working on a lovely new system font for both iOS and OS X. Please refer to this new post on using system fonts in CSS. Note: This post contains out-of-date information and is left here as a historical record.

San francisco font family