Introduction to variable fonts on the web
A typeface is the underlying visual design that can exist in many different typesetting technologies, and a font is one of these implementations, in a digital file format. In other words, a typeface is what you see, and the font is what you use.
A style is a single and specific typeface, such as Bold Italic, and a family is the complete set of styles.
Before variable fonts, each style was implemented as a separate font file.
With variable fonts, all styles can be contained in a single file.