Update: Newer browsers use system-ui as a font name alias for the system font. For example, this will display “San Francisco” on macOS, “Segoe UI” on Windows, and “Roboto” on Android in supported browsers.


font-family: -apple-system, sans-serif;

There are other names to access the system font on older macOS versions (when it was OS X). See, for example, WordPress’s or GitHub’s CSS for a full stack of system fonts. For my use case — local Markdown preview and export — -apple-system is enough.

The San Francisco font family is versatile, having italics, all weights, small-caps, and a wide Unicode range.

There’s also other San Francisco fonts for watchOS that you can call in your CSS:

  • ".SF Compact"
  • ".SF Compact Rounded"
  • ".SF Compact Text"

Some of the fonts are available for download at the Apple Developer site.