Search code examples
ioscssfonts

Using -apple-system for monospace and serif


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)?


Solution

  • 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).