Technical · 7 min read

Variable Fonts: How They Work and Why You Should Use Them

How single-file variable fonts replace dozens of separate weight files using design axes (wght, wdth, slnt).

What Is an OpenType Variable Font?

Traditionally, if you needed Thin, Light, Regular, Medium, Bold, and ExtraBold, you had to load six separate font files. Variable fonts package continuous interpolations of all weights and widths into a single file, controlled via CSS properties like `font-weight: 540` and `font-variation-settings`.

Frequently Asked Questions

Do variable fonts save HTTP requests?
Yes. A single variable font download replaces 4 to 12 separate static font file requests, resulting in dramatically cleaner browser waterfalls and smoother CSS animations.