Skip to main content

Using the Apple system font in your web content

Coming with iOS 9 and OS X El Capitan is the new Apple system font, San Francisco (technically the SF branch). If you make web apps or use web views and want to make sure they match, there's some good news coming your way. Myles Maxfield on Surfin' Safari:

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.

Browsers that don't support -apple-system will simply grab the next font specified in the property list.

San Francisco is gorgeous, and a more consistent way to display it throughout apps and the web is just terrific.

Rene Ritchie
Rene Ritchie

Rene Ritchie is one of the most respected Apple analysts in the business, reaching a combined audience of over 40 million readers a month. His YouTube channel, Vector, has over 90 thousand subscribers and 14 million views and his podcasts, including Debug, have been downloaded over 20 million times. He also regularly co-hosts MacBreak Weekly for the TWiT network and co-hosted CES Live! and Talk Mobile. Based in Montreal, Rene is a former director of product marketing, web developer, and graphic designer. He's authored several books and appeared on numerous television and radio segments to discuss Apple and the technology industry. When not working, he likes to cook, grapple, and spend time with his friends and family.

  • If we like it, is there a way to use SF on a standard Wordpress site or is it proprietary? Can it be purchased? Sorry for my ignorance about fonts etc..
  • My advise: don't try. It can be made to work, but it will only work with Macs running El Capitan, and iOS devices running iOS9 and higher. Basically, it will look weak on 80% of your potential audiences' devices. Forget Windows 7 8 and 10 PCs and phones, Android tablets and phones, older Macs, older iPads and older iPhones, etc. You will get mostly random results, which the exact opposite level of control you are looking for.
  • Thanks! Makes sense--sorry for being so dumb about this stuff. (And any idea what that dude below is going on about with the mother-in-law comment?!)
  • Yeah I know about your mother in law and I know too about what happens to her BMW Sent from the iMore App
  • This is, quite rightly, being ripped to shreds elsewhere on the internet. These OEM specific features have no place on an open web. Apple seem to be hell bent on making the same mistakes that Microsoft ended up making some years ago with IE specific styles and tags. ABORT! ABORT!
  • Until a 'system-font' definition is introduced that directs the browser to use the appropriate system font for the host system software there's not much hope.
  • Even that won't help, unless the system fonts across devices and operating systems are so similar that it does not affect the flow of text or potentially the formatting of documents. It's a bad idea, and one that no one should be suggesting anywhere. Use common fonts for web content. Fonts that either exists on most OSes/devices are are automatically replaced on these devices by very similar fonts. Additionally, the whole IE thing is getting a bit old. IE came to prominence in a time when the Internet was younger (at least in the consumer market) and a lot of the stuff Microsoft did was necessary back then to introduce the types of technologies needed to develop "Web Applications" and enable developers to deliver the types of experiences in the browser that we rave about these days. Also, IE's "stuff" came before a lot of this Web 2.0 stuff was standardized. It's a bit hypocritical to jump all over the IE stuff and then complain about it years later simply because everyone decided (years after them) to adopt different technologies and Microsoft didn't completely re-write/re-architect their browser. Without IE, we likely would not have seen the types of advances we have in web technology. The only reason why those standards were developed was because 3rd party browsers were tired of not being able to run Web Apps that used technology in Windows and Internet Explorer (like ActiveX, VBScript, etc.). Without those, it's likely the rate of innovation (which, frankly, was more evolution than innovation for the most part, since most of that stuff could be accomplished with existing technology in IE) would not have been aggressive or as expansive. Even then, I don't think Microsoft would ever think of using Calibri on their Web Pages/Web Services for the simple reason that it would look like ass on Macs, Linux, Android, iOS, Blackberry, and other platforms.