CSS font-variation-settings Property

Description

The font-variation-settings property gives authors low-level access to the individual design axes exposed by a variable font, letting you tune a typeface’s shapes in ways that higher-level font properties don’t always expose. Instead of selecting a preset like “bold” or “condensed,” it targets the font’s internal axes directly so you can adjust weight, width, optical size or other designer-defined axes with fine granularity. This makes it possible to achieve subtle typographic refinements — for example, balancing stroke contrast, optical correction at different sizes, or intermediate styles that don’t exist as separate static font files.

Because it operates at the axis level, font-variation-settings is most useful when you actually use a variable font family (declared with font-family) that exposes the desired axes. It sits alongside the higher-level font properties: the browser will also consider rules like font-weight that map to common axes, but by specifying axis values directly you can achieve results that the higher-level keywords cannot express. In practice you use the property when you need absolute control over a design axis — for instance in design systems or when fine-tuning typographic rhythm across responsive breakpoints — while still relying on regular font selection and fallback behavior through your font stack.

Practical considerations include animation, accessibility, and robustness. Many axes are animatable, so designers can create smooth transitions between styles, but animating complex shape changes can have performance implications on less powerful devices. Not all fonts expose the same axes, so authoring defensively (with sensible fallbacks in the font stack and not relying on a single axis to convey critical information) is important. For feature-level typographic control that focuses on OpenType substitutions and alternates rather than continuous axes, authors typically use font-feature-settings in tandem with variable axes to combine discrete feature toggles with continuous shape control. Overall, font-variation-settings is a powerful tool for nuanced typography when used with variable fonts and a clear design intent.

Definition

Initial value: normal
Applies to: all elements. It also applies to ::first-letter and ::first-line.
Inherited: yes
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.fontVariationSettings

Interactive Demo

font-variation-settings: 'wght' 50;

font-variation-settings: 'wght' 850;

font-variation-settings: 'wdth' 25;

font-variation-settings: 'wdth' 75;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

font-variation-settings: normal | <string> <number>

Values

normalText is laid out using default settings.
<string> <number>When rendering text, the list of variable font axis names is passed to the text layout engine to enable or disable font features. Each setting is always one or more pairs consisting of a <string> of 4 ASCII characters followed by a indicating the axis value to set. If the <string> has more or fewer characters or contains characters outside the U+20 - U+7E code point range, the whole property is invalid. The <number> can be fractional or negative, depending on the value range available in your font, as defined by the font designer.

Example

HTML

<div class='card'>

  <h1 class='demo-title'>Variable font  -  weight axis (wght)</h1>

  <p class='demo-sub'>Adjusts weight using font-variation-settings: 'wght'.</p>

  <p class='demo-emph'>This line uses multiple axes: 'wght', 'slnt', and 'opsz'.</p>

  <p class='small-note'>Fallbacks apply when a font doesn't support an axis.</p>

</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;900&display=swap');

:root {
  --demo-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: var(--demo-font);
  background: #f7f7fb;
  color: #0f172a;
  padding: 2rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  box-shadow: 0 6px 20px rgba(16,24,40,0.08);
}

.demo-title {
  font-size: 3rem;
  margin: 0 0 0.5rem 0;
  font-variation-settings: 'wght' 800;
  letter-spacing: -0.02em;
}

.demo-sub {
  margin: 0 0 1rem 0;
  color: #374151;
  font-size: 1.05rem;
  font-variation-settings: 'wght' 400;
}

.demo-emph {
  font-size: 1.125rem;
  margin: 0.5rem 0 0.75rem 0;
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variation-settings: 'wght' 700, 'slnt' -8, 'opsz' 14;
}

.small-note {
  font-size: 0.9rem;
  color: #6b7280;
  font-variation-settings: 'wght' 300;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS font-variation-settings property. Hover over a browser icon to see the version that first introduced support for this CSS property.