System Font

System fonts are typefaces pre-installed by the operating system — available on every device without any download. Each major platform ships with a curated set: macOS and iOS use San Francisco, Windows uses Segoe UI, Android uses Roboto, and older macOS versions used Helvetica Neue and Geneva.

System fonts load instantly (zero network request), integrate with platform UI conventions, and typically have superior hinting for their respective rendering environments. These advantages make them attractive for UI-heavy applications where interface chrome should feel native.

Using system fonts in CSS:

The system-ui keyword (supported in all modern browsers) automatically selects the OS's UI font:

body {
  font-family: system-ui, sans-serif;
}

For broader compatibility, including older browsers:

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
}

Using a specific system font by name:

/* Explicitly request a platform font */
.mac-label {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Georgia — widely installed serif */
.classic {
  font-family: Georgia, 'Times New Roman', serif;
}

/* Courier — widely installed monospace */
.typewriter {
  font-family: 'Courier New', Courier, monospace;
}

System fonts with CSS local():

Inside @font-face, local() checks if a font is installed on the system before fetching a remote URL:

@font-face {
  font-family: 'Inter';
  src:
    local('Inter'),                              /* Use installed copy first */
    url('/fonts/inter.woff2') format('woff2');   /* Download if not installed */
}

This optimization can reduce load times for users who have already installed the font (common for popular fonts like Inter or Roboto), but it creates a fingerprinting vector that some browsers have moved to disable. Google Fonts removed local() from their delivery in 2022 for this reason.

When to use system fonts:

System fonts work best for: application interfaces that should feel native, email HTML (where remote fonts are often blocked), tools and dashboards where performance is paramount, and fallback stacks behind web fonts.

They're less suitable for brand-differentiated design, where a custom typeface is part of the visual identity, or for editorial contexts where the typographic character of the content matters.

Notable system fonts by platform:

San Francisco is not available via CSS name — you access it through -apple-system or system-ui. It's the font powering virtually every Apple interface element, making it immediately familiar to Apple device users.