What are CSS variable fonts?

WHAT THIS TESTS This checks whether you grasp variable fonts as a single file encoding a continuous spectrum of styles, plus the performance implications and the correct CSS controls. Senior front-end roles expect you to weigh typography against page weight.

A GOOD ANSWER COVERS A variable font stores one or more design axes, each a continuous range, inside a single file. Registered axes have four-character tags: wght for weight, wdth for width, slnt for slant, ital for italic, and opsz for optical size; fonts may also expose custom axes. Because any value along an axis can be interpolated, you are not limited to preset weights like 400 and 700. Advantages over static fonts: one network request instead of many, often a smaller total payload than shipping many cuts, and the ability to fine-tune weight or width responsively. For control, prefer high-level properties that map to axes: font-weight for wght, font-stretch or font-width for wdth, and font-style oblique with an angle for slnt. For axes without a dedicated property, or for precise values, use font-variation-settings with the axis tag and number.

COMMON WRONG ANSWERS Claiming each weight is still a separate file. Always reaching for font-variation-settings even where font-weight or font-style works, which is discouraged because it bypasses the cascade-friendly properties. Forgetting that very wide axis ranges can make the single file larger than a couple of static cuts.

LIKELY FOLLOW-UPS When does a variable font lose its size advantage? How do you animate along an axis smoothly? Why prefer font-weight over font-variation-settings when both exist? How does font-display interact with loading?

ONE CONCRETE EXAMPLE With one variable font you set font-weight to 350 for body text and animate it toward 600 on hover for a heading, then apply font-variation-settings with slnt set to -8 for a subtle slant, all from a single downloaded file instead of loading distinct regular, semibold, and oblique files.