Since the introduction of web fonts in 2009, web designers have enjoyed a rich set of typographical palettes. These fonts were largely used through the CSS @fontface at-rule, giving designers a way to break free from web-safe (system) fonts.

A variety of font file formats were (and are) available from large font foundries, most notably Google Fonts.

At that time, using web fonts meant working with separate files for each weight and style. For example, filenames like the following made it clear how the font would display in use:

Roboto-Italic.woff2 Lato-BoldItalic.woff2 OpenSans-SemiBold.ttf WorkSans-ExtraBold.ttf

Each variation had to be loaded as its own

Click here to continue reading this article.