- [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.
So regular and then medium itallic and medium
and italic.
And like you have to have a single file for each style
and that means to more variations
of fonts you are displaying on a page,
the more files you are downloading,
and this becomes very unperformant really fast.
To get around this problem,
designers will then choose to use only one font weights
and only one font styles that you only get two files.
But that's unnecessarily restrictive for designers.
This is why we now have variable fonts
and variable fonts have really interesting.
So if I go to Playfair Display,
you'll notice this is a variable font.
And if I scroll down to the bottom of this page here,
there's a display showing me how I can vary this font.
A variable font, unlike a static font,
is a font that describes to the browser
how it should be rendered.
So I can set a variable between say 400 and 900
that impacts the weight of the font
and then I can pick any number between 400 and 900.
And the same font file will then generate different widths.
And this gives designers way more options
in terms of how heavy or thick they want this font to be.
And it also means instead of downloading
many different files for these different weights,
we download a single file
that allows for all of these weights.
The way that these fonts are set up is typically
that there's two files.
There's one for italic variable
and one for regular variable.
So you still need those two files,
but it also means you only need two files,
not five or six or seven or eight,
depending on how many weights you have.
Variable fonts are still a relatively new technology
but it's gaining popularity really fast
and it's supported across the deck on all modern browsers.
If you are curious about variable fonts
and how to use them in your projects,
the first thing you should do is
go to a source like Google Fonts
and check show only variable fonts.
So you get the fonts that have variable versions
and you'll notice there are a ton of them already
and there's more coming online pretty much every day.
The second thing you can do is go check out my course
on variable fonts in our library
because there's a lot more to say about variable fonts.
They're incredibly powerful,
and you can do some things with them
that you previously couldn't do with fonts.
And getting a solid understanding of how they've work
will also help you deal with performance issues
around your fonts.