20

I know that -apple-system defaults to San Francisco on macOS and iOS, but what defaults to SF Mono and New York (the default serif font for Apple products)?

0

1 Answer 1

27

Starting from Safari 13.1, they added font family names for system fonts:

  • ui-monospace — SF Mono
  • ui-serif — New York
  • ui-sans-serif — San Francisco (same as system-ui and -apple-system)

See the blog post.

The CSS I use to get the system monospace on most platforms is as follows:

code {
  font-family: 'SF Mono', SFMono-Regular, ui-monospace,
    'DejaVu Sans Mono', Menlo, Consolas, monospace;
}

The first three are SF Mono, then the Bitstream Vera-derived fonts on Linux (DejaVu) and Mac (Menlo), closing with whatever works on Windows (Consolas).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.