Variable Font

A variable font is a single font file that contains an entire spectrum of typographic variations — weight, width, slant, optical size, and potentially custom axes — all encoded in a single file. Rather than loading separate font files for Regular, Bold, and Italic, a variable font provides continuous, granular control over these attributes from within one file.

Introduced as part of the OpenType 1.8 specification in 2016, variable fonts represent the most significant advancement in font technology in decades. The format uses a "delta" system: the font defines instances at extreme points on each axis, and the rendering engine interpolates any value in between. This means font-weight: 387 is a valid value in a variable font — not just the traditional multiples of 100.

/* Variable font CSS usage */
@font-face {
  font-family: 'InterVariable';
  src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900; /* Declare the full range supported */
  font-display: swap;
}

/* Use any weight value, not just multiples of 100 */
.headline {
  font-family: 'InterVariable', sans-serif;
  font-weight: 650; /* Between SemiBold (600) and Bold (700) */
}

/* Custom axes via font-variation-settings */
.optical-size-heading {
  font-family: 'Source Serif 4', serif;
  font-variation-settings:
    'wght' 700,   /* Weight */
    'opsz' 48;    /* Optical size — optimizes for large display */
}

.optical-size-body {
  font-family: 'Source Serif 4', serif;
  font-variation-settings:
    'wght' 400,
    'opsz' 12;    /* Optimizes letterforms for body text sizes */
}

/* Animation is a unique variable font capability */
@keyframes weight-pulse {
  from { font-variation-settings: 'wght' 300; }
  to   { font-variation-settings: 'wght' 700; }
}

.animated-type {
  font-family: 'Recursive', sans-serif;
  animation: weight-pulse 2s ease-in-out infinite alternate;
}

The performance case for variable fonts is compelling: one variable font file typically replaces four to six static font files. A single woff2 variable font covering 100–900 weight range for both normal and italic might be 250KB — compared to 350KB+ for six separate static files covering the same range.

Google Fonts has been progressively updating its library to variable fonts. Inter, Source Sans 3, Raleway, Nunito, and Source Serif 4 are now available as variable fonts on Google Fonts. The standard axes are wght (weight), wdth (width), ital (italic), slnt (slant), and opsz (optical size). Custom axes (four-letter uppercase tags like SOFT, XHGT) allow typeface-specific control — some display fonts use custom axes to control expressiveness or decorative detail levels.