The “.SFNSDisplay-Regular” is the private font name for the regular face of San Francisco in the current beta release (remember, it can change at any time!)Ĭhrome now supports a BlinkMacSystemFont so the private font name is no longer needed:įont-family: system, -apple-system, BlinkMacSystemFont,įor more information about this change in Chrome, see the links at the end of this post. ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande" If Chrome or another browser is a part of the picture, I’d suggest the following: You’ll get the system font on the most current browsers and a fallback to Helvetica Neue or Lucida Grande on older systems. If you know that your content will only appear in an Apple browser or web view, the markup is pretty simple:
#San francisco display font windows license#
(And you agreed to this license before downloading the font.) Also, Apple’s license for San Francisco limits redistribution, so it can’t be used as a web font. Don’t get fooled like I did: most of the folks that visit your site won’t have these fonts installed.
If you’re a designer or developer who works on Apple devices, chances are good that you’ve installed the San Francisco font manually. If you’d like to learn more about this functionality, these tutorials by the ChocolateScript developers and Thomas Fuchs are very helpful. Of course, there’s no support in Chrome either.Īlso note that these keywords won’t work in your font-family definitions they only work when used with font. Since OS X doesn’t have a way to adjust type dynamically, these keywords are unavailable on the desktop ( source). These keywords can be used on iOS 7 and later: Since the latest version of Chrome is based on a fork of WebKit, it’s not surprising that it’s ignored by Blink.Īdding to the confusion, Safari on iOS has added system font styles that match the Dynamic Type feature. Of course you wouldn’t expect Google to support an “-apple” prefix, but the WebKit source also shows a -webkit-system-font. It certainly feels like work-in-progress.Īnother disappointment is that this generic family name only works in Safari. Most of the information I’ve found about this name comes from the WebKit source code. 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.
#San francisco display font windows install#
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.
0 kommentar(er)
