Variable Font
Variable fonts pack a range of weights and widths in one file — animate font-weight smoothly on hover for expressive typography.
Also called: VF animation, weight morph, fluid typography
Hover Me
font-weight: 400 → 900
How it works
Load a variable font with a weight axis (e.g. wght@100..900). CSS transition on font-weight interpolates between values.
- Only works with fonts that support the axis
- Also animate
font-stretch,font-variation-settingsfor more axes