Targetting the OS X System Font in CSS

body {
  font-family: system-font, -webkit-system-font, -apple-system-font, ".SFNSDisplay-Regular", HelveticaNeue, LucidaGrande;
}

On a fresh install of OS X 10.11 (El Capitan) there’s no San Francisco font installed. But it’s the system font, so how is this possible?

Hence the sort of magic above to actually get it working.

I Left My System Fonts in San Francisco →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

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