Variable Fonts in CSS: One File, All Weights
Multiple font weights without multiple files
You loaded a separate font file for each weight (400, 500, 600, 700), so 4 or more HTTP requests. One variable font file covers the full range with font-weight: 100 900.
@font-face { font-family: "MyFont"; src: url("MyFont-Regular.woff2"); font-weight: 400;}@font-face { font-weight: 700; ...}@font-face { font-weight: 600; ...}@font-face { font-family: "MyVar"; src: url("MyVar.woff2"); font-weight: 100 900;}font variation settings Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2018.
Safe to use without fallbacks.
Fewer requests
One variable font file instead of four or more for Regular, Medium, SemiBold, Bold.
Any weight in range
Use font-weight: 350 or 627 if the font supports it. No need to add a new @font-face.
Smaller total size
One optimized file is often smaller than the sum of several static weight files.
How it works
The old approach was one @font-face per weight: Regular (400), Medium (500), SemiBold (600), Bold (700). Each pointed at a different file, so the browser made 4 or more requests and you had to add a new @font-face whenever you needed another weight.
Variable fonts pack multiple weights (and sometimes width or other axes) into a single file. In @font-face you set font-weight: 100 900 (or the range the font supports). The browser downloads one file and you use any weight in that range with font-weight: 400, font-weight: 600, etc. Check the font's documentation for its actual range.