- [Instructor] The most significant performance hit
you get from using a third-party web font
is that it's coming from a third party
and requires a separate connection.
That means self-hosting your web fonts
eliminates this problem
which gives you an automatic performance boost.
So this is what you should always try to do,
self-host your fonts.
When you self-host your web fonts,
you can take advantage of a whole range
of performance optimization we've already talked about
including pre-loading the font style sheets
or even in-lining them in critical CSS
and setting font display swap as a standard.
You can also further control how the web fonts are loaded
using JavaScript
and hooking into the browser's font loading API,
though this is still experimental technology.
So your mileage will vary as they say.
The cool thing is most open web fonts
that you find on services like Google fonts
are also available for downloads.
You can incorporate them and self host them
in your own projects.
Here's an example.
If I go to Google fonts and look for Playfair Display,
there's a button right here, download family
that will allow me to download the entire font family
onto my computer and place it into my project.
That way I'm no longer relying on Google fonts API,
I can just host my fonts directly.
Here's what that looks like.
So I've downloaded Playfair Display.
It sits here under fonts folder.
Inside Playfair Display I have a read me text.
I have the variable font files
and I also have the static font files,
if I wanted to fall back to a static font.
To get this new custom font to work
I've created a new style sheet for it called font style.CSS.
You can choose to create a custom style sheet
for each of your fonts,
or just incorporate these rules
into your regular style sheet.
It's entirely up to you.
If you're using critical CSS,
it'll figure all this out anyway.
But for our purposes, I've split it out.
So here I've created two add font face rules.
These are the rules that define each of the fonts
and I've set these rules up for performance
by setting font display to swap.
That way the browser will load a default font
until we get the full new custom font loaded in properly
and then the font is swapped.
You can also set font as play to other values
but the best practice scenario here
is pretty much always to set it to swap.
There's one more thing you can do
to further improve the performance of this custom font
even when it's hosted on your own site.
You notice how the custom font actually works.
We pull in the style sheet
that declares the add font face rule
and then that add font phase rule points out a file.
So in this case,
Playfair Display italic variable font weight TTF.
All right, so that means first we load the CSS.
Then we load the font file.
And in our case, we're loading two font files.
Which creates a synchronous chain.
We can bypass that synchronous chain using preload.
So if we set up link rel preload as font
and point at a font type, we can tell the browser,
Hey I know that you are going to need this file.
So I want you to preload it into the cache,
and then when the file is called from the CSS
you already have it.
So you make the loading of this file asynchronous,
even though it is technically a synchronous loading.
That's done in index.HTML.
So here we have those two files being preloaded.
And that means as the browser starts from the top
and starts reading this document,
it starts pre-loading the font files
before it even knows they exist and they need to be used
because the style sheet that calls in the fonts
are down here.
This actually creates a significant performance boost
but only if you really need to have the font files there.
So if you want the custom fonts to kick in right away
you preload these font files in
and then you'll get that performance enhancement.
However, it does give you also a performance hit
because you are now downloading two extra files
that the browser wouldn't otherwise download this quickly.
So, you know, you have to balance these things
and figure out what matters the most to you.
Getting the page to load fast
or getting the fonts on the page to load fast.