What are CSS variable fonts?
modern web typography and performance.
one file encodes a continuous range along axes, cutting requests and bytes, controlled via font-weight, font-style, and font-variation-settings.
What's really being asked
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.
The full answer
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.
The mistakes people make
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.
What usually comes next
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?
A 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.
Interview question
When controlling a variable font, why prefer font-weight over font-variation-settings where both can set weight?
- a.font-variation-settings only works in print stylesheets
- b.High-level properties integrate with the cascade and inheritance more predictablyCorrect
- c.font-weight loads the font faster than the low-level property
- d.font-variation-settings cannot set the wght axis at all
Why? this is the answer
Dedicated properties like font-weight map to axes while participating cleanly in the cascade and animation, so they are preferred. font-variation-settings can set wght but is a low-level escape hatch, not faster or print-only.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #typography
- #variable-fonts
- #performance
- #frontend
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles