CSS · Styling Basics

Variable Fonts

One font file with infinite design possibilities

Find videos you like?

Save to resource drawer for future reference!

Variable Fonts

Adjustable typography with font-variation-settings

Variable Fonts = Infinite Variations! ✨

Instead of loading multiple font files (Regular, Bold, Italic), variable fonts contain all variations in one file! Adjust weight, width, slant, and custom axes smoothly with CSS.

Traditional vs Variable Fonts

❌ Traditional

• Multiple files (Regular.woff, Bold.woff, etc.)
• ~100KB × 6 styles = 600KB
• Fixed weights (400, 700)
• More HTTP requests

✅ Variable

• One file (Variable.woff2)
• ~150KB total
• Any weight (100-900)
• Smooth animations!

Standard Axes

5 registered variation axes

wght

Weight

100-900

CSS Property: font-weight

font-weight: 350;

wdth

Width

50-200

CSS Property: font-stretch

font-stretch: 115%;

slnt

Slant

-10 to 0

CSS Property: font-style: oblique

font-style: oblique 10deg;

ital

Italic

0 or 1

CSS Property: font-style: italic

font-style: italic;

opsz

Optical Size

6-72

CSS Property: font-optical-sizing

font-optical-sizing: auto;

Pro Tip!

Use standard CSS properties like font-weight when available - they're easier to read and maintain!

font-variation-settings

Low-level control over variations

For custom axes or fine-grained control, use font-variation-settings:

Syntax & Examples

/* Single axis */
font-variation-settings: 'wght' 650;

/* Multiple axes */
font-variation-settings: 
  'wght' 500,
  'wdth' 120,
  'slnt' -5;

/* Custom axes (font-specific) */
font-variation-settings: 
  'wght' 600,
  'GRAD' 150;  /* Custom gradient axis */

⚠️ Axis names must be in quotes and exactly 4 characters!

Interactive Demo

See variable fonts in action

Variable Fonts Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>✨ Variable Fonts Demo</h1>
      <div class="demo-section">
        <div class="label">Standard Weights (100, 300, 500, 700, 900)</div>
        <div class="grid">
          <div class="weight-card">
            <div class="demo-text weight-100">Aa</div>
            <div class="weight-value">100 Thin</div>
          </div>
          <div class="weight-card">
            <div class="demo-text weight-300">Aa</div>
            <div class="weight-value">300 Light</div>
          </div>
          <div class="weight-card">
            <div class="demo-text weight-500">Aa</div>
            <div class="weight-value">500 Medium</div>
          </div>
          <div class="weight-card">
            <div class="demo-text weight-700">Aa</div>
            <div class="weight-value">700 Bold</div>
          </div>
          <div class="weight-card">
            <div class="demo-text weight-900">Aa</div>
            <div class="weight-value">900 Black</div>
          </div>
        </div>
      </div>
      <div class="demo-section">
        <div class="label">🎯 Custom Weights (450, 650) - Only possible with Variable Fonts!</div>
        <div class="grid" style="grid-template-columns: 1fr 1fr;">
          <div class="weight-card">
            <div class="demo-text weight-450">Aa</div>
            <div class="weight-value">450 Custom</div>
          </div>
          <div class="weight-card">
            <div class="demo-text weight-650">Aa</div>
            <div class="weight-value">650 Custom</div>
          </div>
        </div>
      </div>
      <div class="demo-section">
        <div class="label">🎬 Animated Weight (300 → 900)</div>
        <div style="text-align: center; padding: 30px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 12px;">
          <div class="demo-text animated" style="color: white; font-size: 64px;">
            Variable!
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Loading Variable Fonts

How to use variable fonts

@font-face Declaration

@font-face {
  font-family: 'InterVariable';
  src: url('Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;  /* Range */
  font-display: swap;
}

Popular Variable Fonts:

Inter

UI, body text

Roboto Flex

Google Material

Source Sans 3

Adobe, readable

Recursive

Code & UI

Remember

One file replaces multiple font weights

Use any weight: font-weight: 450;

Can animate font-weight smoothly!

Browser support: All modern browsers

Previous Topic

Typography

Font family, size, weight, style, line-height, letter-spacing, and web font loading strategies.

Next Topic

Text Effects

Text shadows, text-stroke, text-decoration (underline, overline), text-decoration-style, and text-emphasis.

Ask a Question

Have a question about Variable Fonts? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Styling Basics

Variable Fonts

One font file with infinite design possibilities

Find videos you like?

Save to resource drawer for future reference!

Variable Fonts

Adjustable typography with font-variation-settings

Variable Fonts = Infinite Variations! ✨

Instead of loading multiple font files (Regular, Bold, Italic), variable fonts contain all variations in one file! Adjust weight, width, slant, and custom axes smoothly with CSS.

Traditional vs Variable Fonts

❌ Traditional

• Multiple files (Regular.woff, Bold.woff, etc.)
• ~100KB × 6 styles = 600KB
• Fixed weights (400, 700)
• More HTTP requests

✅ Variable

• One file (Variable.woff2)
• ~150KB total
• Any weight (100-900)
• Smooth animations!

Standard Axes

5 registered variation axes

wght

Weight

100-900

CSS Property: font-weight

font-weight: 350;

wdth

Width

50-200

CSS Property: font-stretch

font-stretch: 115%;

slnt

Slant

-10 to 0

CSS Property: font-style: oblique

font-style: oblique 10deg;

ital

Italic

0 or 1

CSS Property: font-style: italic

font-style: italic;

opsz

Optical Size

6-72

CSS Property: font-optical-sizing

font-optical-sizing: auto;

Pro Tip!

Use standard CSS properties like font-weight when available - they're easier to read and maintain!

font-variation-settings

Low-level control over variations

For custom axes or fine-grained control, use font-variation-settings:

Syntax & Examples

/* Single axis */
font-variation-settings: 'wght' 650;

/* Multiple axes */
font-variation-settings: 
  'wght' 500,
  'wdth' 120,
  'slnt' -5;

/* Custom axes (font-specific) */
font-variation-settings: 
  'wght' 600,
  'GRAD' 150;  /* Custom gradient axis */

⚠️ Axis names must be in quotes and exactly 4 characters!

Interactive Demo

See variable fonts in action

Variable Fonts Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>✨ Variable Fonts Demo</h1>
      <div class="demo-section">
        <div class="label">Standard Weights (100, 300, 500, 700, 900)</div>
        <div class="grid">
          <div class="weight-card">
            <div class="demo-text weight-100">Aa</div>
            <div class="weight-value">100 Thin</div>
          </div>
          <div class="weight-card">
            <div class="demo-text weight-300">Aa</div>
            <div class="weight-value">300 Light</div>
          </div>
          <div class="weight-card">
            <div class="demo-text weight-500">Aa</div>
            <div class="weight-value">500 Medium</div>
          </div>
          <div class="weight-card">
            <div class="demo-text weight-700">Aa</div>
            <div class="weight-value">700 Bold</div>
          </div>
          <div class="weight-card">
            <div class="demo-text weight-900">Aa</div>
            <div class="weight-value">900 Black</div>
          </div>
        </div>
      </div>
      <div class="demo-section">
        <div class="label">🎯 Custom Weights (450, 650) - Only possible with Variable Fonts!</div>
        <div class="grid" style="grid-template-columns: 1fr 1fr;">
          <div class="weight-card">
            <div class="demo-text weight-450">Aa</div>
            <div class="weight-value">450 Custom</div>
          </div>
          <div class="weight-card">
            <div class="demo-text weight-650">Aa</div>
            <div class="weight-value">650 Custom</div>
          </div>
        </div>
      </div>
      <div class="demo-section">
        <div class="label">🎬 Animated Weight (300 → 900)</div>
        <div style="text-align: center; padding: 30px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 12px;">
          <div class="demo-text animated" style="color: white; font-size: 64px;">
            Variable!
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Loading Variable Fonts

How to use variable fonts

@font-face Declaration

@font-face {
  font-family: 'InterVariable';
  src: url('Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;  /* Range */
  font-display: swap;
}

Popular Variable Fonts:

Inter

UI, body text

Roboto Flex

Google Material

Source Sans 3

Adobe, readable

Recursive

Code & UI

Remember

One file replaces multiple font weights

Use any weight: font-weight: 450;

Can animate font-weight smoothly!

Browser support: All modern browsers

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Typography

Text Effects

Building Your Learning Module...

Variable Fonts

Variable Fonts = Infinite Variations! ✨

Traditional vs Variable Fonts

Pro Tip!

Syntax & Examples

Variable Fonts Demo

@font-face Declaration

Popular Variable Fonts:

Remember

Typography

Text Effects

Variable Fonts

Variable Fonts = Infinite Variations! ✨

Traditional vs Variable Fonts

Pro Tip!

Syntax & Examples

Variable Fonts Demo

@font-face Declaration

Popular Variable Fonts:

Remember