CssHow-ToBeginner · 4 min read

How to Use Variable Font in CSS: Simple Guide

To use a variable font in CSS, first load the variable font file with @font-face. Then apply it using font-family and control font variations like weight or width using the font-variation-settings property or shorthand properties like font-weight.

📐

Syntax

Use @font-face to load the variable font file. Then use font-family to apply it. Control font variations with font-variation-settings or standard CSS properties like font-weight.

@font-face: Defines the variable font source.
font-family: Applies the font to elements.
font-variation-settings: Adjusts axes like weight, width, slant.
Standard properties like font-weight can also control variations if supported.

css

@font-face {
  font-family: 'MyVariableFont';
  src: url('MyVariableFont.woff2') format('woff2');
  font-weight: 100 900; /* range of weights */
  font-stretch: 75% 125%; /* range of widths */
}

body {
  font-family: 'MyVariableFont', sans-serif;
  font-weight: 400;
  font-variation-settings: 'wght' 700, 'wdth' 100;
}

💻

Example

This example loads a variable font and changes its weight and width using font-variation-settings. You will see the text get bolder and wider.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Variable Font Example</title>
<style>
@font-face {
  font-family: 'RobotoFlex';
  src: url('https://fonts.gstatic.com/s/robotoflex/v1/RobotoFlex-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-stretch: 75% 125%;
}

body {
  font-family: 'RobotoFlex', sans-serif;
  font-size: 2rem;
  margin: 2rem;
}

.normal {
  font-variation-settings: 'wght' 400, 'wdth' 100;
}

.bold-wide {
  font-variation-settings: 'wght' 900, 'wdth' 120;
}
</style>
</head>
<body>
<p class="normal">This is normal weight and width.</p>
<p class="bold-wide">This is bold and wider text using variable font.</p>
</body>
</html>

Output

Two paragraphs of text: the first is normal weight and width, the second is bold and wider using the variable font.

⚠️

Common Pitfalls

Common mistakes when using variable fonts include:

Not specifying the font-weight or font-stretch range in @font-face, which can cause browsers to ignore variations.
Using font-variation-settings without checking if the font supports those axes.
Forgetting to provide fallback fonts in font-family.
Using variable fonts without proper browser support checks (most modern browsers support them).

css

@font-face {
  font-family: 'BadFont';
  src: url('BadFont.woff2') format('woff2');
  /* Missing font-weight range */
}

/* Wrong usage: no variation axes defined */
p {
  font-family: 'BadFont', sans-serif;
  font-variation-settings: 'wght' 700; /* May not work */
}

/* Correct usage: specify weight range */
@font-face {
  font-family: 'GoodFont';
  src: url('GoodFont.woff2') format('woff2');
  font-weight: 100 900;
}
p {
  font-family: 'GoodFont', sans-serif;
  font-variation-settings: 'wght' 700;
}

📊

Quick Reference

Remember these key points when using variable fonts:

Use @font-face with font-weight and font-stretch ranges.
Apply the font with font-family.
Control variations with font-variation-settings or standard CSS properties.
Always provide fallback fonts.
Test in modern browsers for support.

✅

Key Takeaways

Load variable fonts with @font-face including weight and stretch ranges.

Use font-variation-settings to customize font weight, width, and other axes.

Fallback fonts are important for browsers that don't support variable fonts.

Most modern browsers support variable fonts, but always test your site.

Standard CSS properties like font-weight can control variable fonts if ranges are set.