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.
2 font-family: "MyFont";
3 src: url("MyFont-Regular.woff2");
4 font-weight: 400;
5}
6@font-face { font-weight: 700; ... }
7@font-face { font-weight: 600; ... }
8/* One request per weight */
2 font-family: "MyVar";
3 src: url("MyVar.woff2");
4 font-weight: 100 900;
5}
6/* One file, any weight */
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.