From the course: Developing for Web Performance

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Variable fonts to the rescue?

Variable fonts to the rescue?

- [Instructor] In the previous example where I self hosted Playfair Display, I mentioned when I downloaded this whole font family from Google, I got both the variable version and the static version, and this has a significant impact on performance. To understand why we need to understand how fonts work. So let me briefly explain. When you go to Google fonts or anywhere else to use a custom font, you can select which styles you want to use. So you can say I once the regular 400 and I also want italic 400 and I want, let's see semi bold 600 and then bold 700. And as I do this, I'll get a list of different font files that are downloaded. And you'll notice that here we have regular 400, 400 italics, 600. These files correspond with the files that are sitting here inside the static folder. So if I want different weights and styles of fonts, in the past, I had to then download one font file for each of the weights.…

Contents