How to use the new Apple System Font SAN FRANCISCO on your website

Screen Shot 2015-11-04 at 16.58.08

Apple have a new System Font in El Capitan and all of their other products starting 2015: it’s called San Francisco. It’s very similar to their previous font Helvetica Neue, but apparently San Francisco is better for your eyes (not to mention the fact that Helvetica Neue isn’t owned by Apple, and obviously we can’t have that).

If you’ve tried searching for San Francisco on your Mac’s Font Book app, you’ll notice that it doesn’t seem to exist. Likewise, if you’re trying to use it in CSS it won’t work.

Thanks to Craig Hockenberry I now know that this is because Apple haven’t exposed the font the usual way; rather, it can be used in web content and via CSS with a new property they’ve introduced. Here’s how:

body {
  font-family: -apple-system, Helvetica Neue, sans-serif;
}

Replace body with your own CSS property, and on Apple devices running El Capitan, iOS 9, watchOS2 or tvOS, your web views will sport San Francisco. Other devices will show Helvetica Neue when installed, or use a generic sans-serif font.





Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.