How Safari Renders San Francisco via System Font Keywords

This article provides a complete overview of how the Safari web browser translates CSS system font keywords into Apple’s proprietary San Francisco typeface. You will learn the functional differences between the legacy -apple-system keyword and the modern system-ui standard, why Apple restricts direct access to the font by name, and how Safari's WebKit engine utilizes macOS and iOS APIs to automatically manage optical sizing, weights, and language fallbacks when rendering text.

The Evolution of System Font Keywords

To render the San Francisco typeface on a webpage in Safari, developers cannot simply write font-family: "San Francisco" or font-family: "SF Pro". For licensing and user-privacy reasons (specifically to prevent browser fingerprinting), Safari blocks websites from accessing locally installed system fonts by their literal names. Instead, WebKit—the rendering engine behind Safari—relies on generic CSS font family keywords.

There are two primary keywords Safari uses to trigger the default San Francisco UI font:

  • -apple-system: Introduced by Apple when the system font transitioned from Helvetica Neue to San Francisco in 2015. This vendor-prefixed keyword was designed to let web developers match the native look of iOS and macOS apps before a web standard existed.
  • system-ui: Standardized by the W3C in the CSS Fonts Module Level 4 specification. This keyword serves as a universal cross-platform declaration to use whatever default interface font the host operating system provides.

In modern versions of Safari, -apple-system and system-ui are functionally identical. When WebKit parses a stylesheet containing either keyword, it bypasses the standard local font directory lookup and routes the request directly to the operating system's native text-rendering engine.

How WebKit Communicates with Core Text

When Safari encounters system-ui or -apple-system, WebKit hands the font resolution process over to Core Text, Apple's low-level text layout and rendering API.

Core Text determines which specific variant of the San Francisco family to load based on the device and operating system:

  1. macOS, iOS, and iPadOS: Core Text maps the keyword to SF Pro.
  2. watchOS: Core Text maps the keyword to SF Compact (though full Safari is limited on watchOS, WebKit views are used for rendering web content in messages and mail).
  3. visionOS: Core Text maps the keyword to SF Pro with specific adjustments optimized for spatial readability.

Furthermore, San Francisco only covers Latin, Greek, and Cyrillic scripts. If a webpage contains text in another script—such as Japanese, Arabic, or Chinese—Safari uses Core Text's cascading fallback list. It seamlessly blends San Francisco with the system's native counterpart for that language (for example, rendering PingFang SC for Simplified Chinese) while maintaining consistent vertical metrics and visual weight.

Automatic Optical Sizing and Variable Fonts

One of the main advantages of using system-ui in Safari is automatic optical sizing. The San Francisco typeface was originally engineered with two distinct optical sub-families: SF Pro Text (optimized for legibility at sizes below 20 points with wider spacing and sturdier strokes) and SF Pro Display (optimized for headlines at 20 points or larger with tighter spacing).

In older versions of macOS and iOS, Safari automatically switched between the Text and Display variants based on the computed CSS font-size of the element.

In modern Apple operating systems, San Francisco is deployed as a variable font. Rather than switching abruptly at the 20-pixel threshold, Safari uses the font-optical-sizing: auto CSS property (which is enabled by default) to smoothly interpolate the letterforms along the optical size (opsz) axis. As the CSS font size increases, Safari dynamically adjusts the tracking and stroke thickness via Core Text without requiring extra CSS declarations from the developer.

Extended UI Font Keywords in Safari

Beyond the standard sans-serif interface font, Safari supports additional CSS Fonts Level 4 generic keywords that map to other branches of Apple's system typography:

  • ui-sans-serif: Functions identically to system-ui, resolving to SF Pro.
  • ui-rounded: Instructs Safari to render SF Pro Rounded, which softens the terminals of the standard San Francisco letterforms.
  • ui-monospace: Maps directly to SF Mono, Apple’s coding and tabular typeface.
  • ui-serif: Maps to New York, Apple's system serif typeface designed to complement San Francisco's metrics.

By relying on these keywords, Safari ensures that web content renders with the exact typographic behavior, weight distribution, and rendering performance of a native Apple application.