I Left My System Fonts in San Francisco

Avatar of Robin Rendle
Robin Rendle on (Updated on )

A post by Craig Hockenberry that details how to use the San Francisco system font for your website if you’re running El Capitan.

I especially like Craig’s suggestion for a new syntax when using any operating system’s font, so for example in iOS that would probably be San Francisco or Helvetica Neue whilst in Android it would be Roboto. He suggests that we declare a system keyword in the font-family rule (although this won’t work in any browsers today):

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

The ability to have a standardised way of doing this sounds like a good idea to me.

Related: through JavaScript, we can figure out the system font and apply it.

Direct Link →