variable-fonts-economy

name	variable-fonts-economy
description	Use when optimizing font loading. Variable fonts ship multiple weights in one file — faster than loading 5 separate weight files.

Variable Fonts Economy

Variable fonts ship multiple weights and styles in one file. ~50-70% smaller than loading equivalent static fonts.

Variable font advantages

1. Smaller total download (1 file vs 5)
2. Fine-grained weight control (any weight 100-900, not just preset)
3. Animation between weights
4. Custom width axes (condensed/expanded)
5. Optical size axes (display vs text optimized)

Implementation

@font-face {
  font-family: 'Inter Tight';
  src: url('inter-tight.variable.woff2') format('woff2 supports variations');
  font-weight: 100 900;
  font-style: oblique 0deg 14deg;
  font-display: swap;
}

Load once, use any weight.

File size comparison

Static fonts (5 weights × Latin + Latin-ext):

• Inter Tight 5 static weights: ~250KB total
• Inter Tight variable: ~85KB
• Savings: ~165KB

For a typical site, ~165KB savings = ~0.5s faster load on slow connection.

Where this fits in the X3 empire

Used in CardPrepAI font delivery for optimal performance.