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.
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, 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.