Variable fonts shipped as a web standard in 2018. For the first several years, the design community used them primarily as expressive tools (animating weight on hover, building custom interactive typography) while the performance story remained complicated. Variable font files are often larger than individual static weight files, so the “one file instead of four” pitch only held up at a certain threshold.
That calculus has shifted in the last 18 months. The combination of better subsetting tools, improved font-display strategies, and wider adoption of WOFF2 compression means the performance case for variable fonts is now stronger in practice than it used to be in theory.
The practical workflow that’s working for teams: subsetting the variable font to include only the characters required for the language of the site (Latin-only for English-language products can cut a variable font file by 60-70%), using font-display: swap combined with a font-size-adjust declaration to minimize layout shift during the swap, and serving the variable font with the full range of the axes rather than artificially limiting it to the weights you’ve designed.
The last point matters because it future-proofs the type system. If your brand guidelines call for weights 400-700 today, but a redesign two years from now wants to use weight 300 or weight 900, a variable font that covers the full axis doesn’t require a new asset. You adjust a CSS variable.
The brands doing this well: the new Shopify brand system uses a single variable file (Neue Montreal by Pangram Pangram) across their entire consumer surface, with axis ranges tuned for the specific use context. The checkout flow uses a tighter weight range (400-600) than the marketing site (300-800). Both are served from the same file with different CSS variable ranges.
The fonts worth knowing for variable performance: Recursive (extremely expressive axes, good compression), Inter (solid variable implementation of the industry-standard face), and Fraunces (one of the few quality variable serifs with full wght, ital, and optical-size axes).