Safari Support for Variable Fonts and OpenType in CSS

This article provides a comprehensive overview of how Apple's Safari web browser supports Variable Fonts and OpenType font features through Cascading Style Sheets (CSS). It covers the required system milestones, the correct declaration of @font-face rules, the implementation of high-level and low-level CSS properties for typographic control, and specific WebKit rendering behaviors that developers must manage to ensure optimal web typography.

System and Browser Requirements

Safari relies on Apple’s underlying operating system text engine (CoreText) to render typography. While OpenType features have been supported in Safari for over a decade, support for Variable Fonts was introduced in Safari 11. Because Safari updates are tied to operating system updates, users must be on macOS High Sierra (10.13) or iOS 11 and later for Variable Fonts to render correctly.

Loading Variable Fonts with @font-face

To use a variable font in Safari, you must declare it within a @font-face rule. Safari supports the woff2-variations format hint, though modern versions of Safari (Safari 15+) also understand the standard woff2 format for variable fonts.

Critically, Safari requires you to define the specific range for weights and widths inside the @font-face block. If you omit these ranges, Safari will clamp the values or apply faux-bolding.

@font-face {
  font-family: 'MyVariableFont';
  src: url('font.woff2') format('woff2-variations'),
       url('font.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: oblique 0deg 20deg;
}

Controlling Variable Font Axes

Safari supports both registered (standard) axes and custom axes defined by the type designer. WebKit’s rendering engine prioritizes high-level CSS properties over low-level settings.

Registered Axes (High-Level Properties) Whenever possible, use standard CSS properties to control the five registered variable font axes in Safari:

  • Weight (wght): Controlled via font-weight: 350; (accepts any integer between 1 and 1000).
  • Width (wdth): Controlled via font-stretch: 115%;.
  • Optical Size (opsz): Controlled via font-optical-sizing: auto;. Safari enables this by default for variable fonts that contain an optical size axis.
  • Italic (ital) and Slant (slnt): Controlled via font-style: italic; or font-style: oblique 14deg;.

Custom Axes (Low-Level Property) For custom axes (such as Grade GRAD or X-Height XHGT), you must use the font-variation-settings property. Custom axes are always written in czter-letter uppercase tags, while registered axes are lowercase.

.custom-heading {
  font-family: 'MyVariableFont', sans-serif;
  font-weight: 650; 
  font-variation-settings: 'GRAD' 88, 'XHGT' 500;
}

Implementing OpenType Font Features

OpenType features—such as ligatures, small caps, swashes, and tabular numbers—are fully supported in Safari. Similar to variable fonts, Safari supports both high-level and low-level CSS properties to activate these features.

High-Level Properties (font-variant-*) Apple’s WebKit team strongly recommends using the font-variant sub-properties to trigger OpenType features. These properties cascade cleanly and do not overwrite one another.

  • Ligatures: font-variant-ligatures: common-ligatures discretionary-ligatures;
  • Caps: font-variant-caps: small-caps;
  • Numbers: font-variant-numeric: oldstyle-nums tabular-nums slashed-zero;
  • East Asian Text: font-variant-east-asian: jis78 full-width;
  • Alternates: font-variant-alternates: stylistic(1); (Supported fully in Safari 16.4+)

Low-Level Property (font-feature-settings) If an OpenType feature does not have a corresponding font-variant property (such as specific stylistic sets ss01 through ss20 in older Safari versions, or contextual alternates calt), you can use font-feature-settings.

.tabular-data {
  /* Preferred method in Safari */
  font-variant-numeric: tabular-nums;
  
  /* Fallback or for specific stylistic sets */
  font-feature-settings: "tnum" 1, "ss01" 1, "kern" 1;
}

Note: In Safari, font-feature-settings overrides font-variant. Additionally, because font-feature-settings resets all unlisted features to their default state, you must redeclare all desired four-letter OpenType tags whenever you update the property on a child element.

Preventing Faux Styles in Safari

A common issue in Safari when using Variable Fonts and OpenType features is the browser's tendency to synthesize bold and italic styles (faux-bold and faux-italic) if it does not immediately recognize the font's capabilities. This ruins the design of variable fonts and can disable certain OpenType features.

To prevent Safari from generating artificial styles, always include the font-synthesis property in your CSS:

body {
  font-family: 'MyVariableFont', sans-serif;
  font-synthesis: none;
}

Setting font-synthesis: none; instructs Safari’s WebKit engine to rely strictly on the variable font axes and OpenType tables provided in the font file, ensuring accurate typographic rendering.