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.
".SF Compact Rounded"
".SF Compact Text"
".SF UI Display Condensed"
".SF UI Text Condensed"
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.”