The reason for this is that most typefaces have very specific designs for bolder weights and italics that often include completely different characters (lower-case 'a' and 'g's are often quite different in italics, for example). bold and italic and bold italic), rather than relying upon the browser to synthesize them. You might notice that we have been talking about having a specific font file for every weight and style (i.e. A note about font families, weights, and variants For comparison, it is typical in a typographic system for a magazine to use 10–15 or more different weight and width combinations throughout the publication - giving a much wider range of styles than currently typical on the web (or indeed practical for performance reasons alone). This allows for common typographic techniques such as setting different size headings in different weights for better readability at each size or using a slightly narrower width for data-dense displays. The advantage in choosing the variable font is that you have access to the entire range of weights, widths, and styles available, rather than being constrained to only the few that you previously would have loaded separately.
That file would be larger than a single font, but in most cases smaller or about the same size as the 4 you might load for body copy. With a variable font, all of those permutations can be contained in a single file.