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

- by

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.



If you enjoy my content, please consider supporting me on Ko-fi. In return you can browse this whole site without any pesky ads! More details here.

Leave a Comment!

This site uses Akismet to reduce spam. Learn how your comment data is processed.