In CSS:

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, 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 complete, having italics, all weights, small-caps, and a wide Unicode range.

There’s also:

  • ".SF Compact"
  • ".SF Compact Rounded"
  • ".SF Compact Text"
  • ".SF UI Display Condensed"
  • ".SF UI Text Condensed"
  • ".SF Mono"

I couldn’t reference the ".SF UI …" options in CSS. “SF Mono” is bundled in the Terminal.app package. Some of the fonts are available for download at the Apple Developer site.


Update: browsers are starting to use system-ui as a font name alias for the system font. For example, in supporting browsers, this displays “San Francisco” on macOS, “Segoe UI” on Windows, and on Android, “Roboto.”