CSS Font Family for San Francisco
As a part of this abstraction, there’s now a new generic family name:
-apple-system-font. The markup looks like this:body { font-family: -apple-system-font, HelveticaNeue, LucidaGrande; }Unfortunately, it’s very poorly documented. Most of the information I’ve found about this name comes from the WebKit source code. It certainly feels like work-in-progress.
Update (2015-07-12): Nick Heer:
What’s kind of fun about this discovery is how
-apple-system-font— the self-descriptive system font declaration — renders on the current OS X/iOS releases. If you open his test page, you can see some subtle differences between Helvetica Neue (the red text) and the system version of Helvetica (the last three examples).
Update (2015-07-27): Myles Maxfield:
Web content is sometimes designed to fit in with the overall aesthetic of the underlying platform which it is being rendered on. One of the ways to achieve this is by using the platform’s system font, which is possible on iOS and OS X by using the “-apple-system” CSS value for the “font-family” CSS property. On iOS 9 and OS X 10.11, doing this allows you to use Apple’s new system font, San Francisco. Using “-apple-system” also correctly interacts with the font-weight CSS property to choose the correct font on Apple’s latest operating systems.
Previously: San Francisco as the Mac System Font.
