- [Instructor] Let's look at how to optimize fonts
from a third party source like Google Fonts first.
Even though these fonts are delivered
from some of the fastest servers and services on the web,
they still cause negative performance effects.
If you're using fonts from say, Google Fonts,
your site will be slower than if you were using fonts
that were hosted in your local environment.
So, how do we go about ensuring
the best possible performance for fonts
we have relatively little control over?
Well, here are some current best practices.
First, pick only the fonts weights and styles
you're actually going to use.
As what you're seeing here,
even though we have a ton of weights available,
I'm only going to pick the styles
I'm actually using in my layout.
The good news is when these weights
are added in Google Fonts,
they're added using a comma separated list.
So as you work with your project, you can start
by adding just one style.
And then as you see you need more,
you just add in the styles you need
and then you'll only have the styles you need.
Second, when using multiple font families,
combine the requests so you only send
one HTTP request to the service.
Instead of sending separate requests,
just string them along.
If you define several different fonts inside Google Fonts,
it'll automatically string them all
into one request for you.
Third, use resource hints to pre-fetch the Google Font API
and pre-connect to the service
that hosts the font files for you.
I'll show you how that works in a second.
Fourth, add &display=swap to the end of your request.
This adds the display swap property to the add font face
CSS rules, which are generated by Google Fonts.
And they tell the browser to use whatever font
it has available first
and then swap to the custom web font,
when that web font has been downloaded.
This eliminates the risk of a flash of visible text.
And finally, in the rare case when you're using a font
to display a specific word or sentence and nothing else,
maybe a company name or heading or something similar,
you can actually pass that custom text
along with your request to Google Fonts
and Google fonts will only return the glyphs
for that text and nothing else.
So let's look at this code.
What does the optimal font loading
from Google Fonts look like?
We start off with a DNS prefetch.
This tells the browser,
hey, you are going to need to gain access
to fontsgoogleapis.com at some point,
so going get that DNS information right away
even before I request it.
This adds a tiny improvement to the DNS fetch
that you need to do anytime you give requests,
anything from a different source.
Second, we preconnect to fonts.gstatic.com.
This is where all the font files themselves are stored.
And this preconnect allows the browser to open a connection
before these files are requested.
These files will only be requested once the style sheet
is fully loaded and having this preconnect in place
means there's already an open pipe
leading to that server that we can pull data from.
I've also added cross origin here
because this is not the same domain
that we're pulling the rest of the site from.
And this allows the browser
to validate the content and not create conflicts
because data's coming from different sources.
Finally, we have the call to the CSS itself.
And with Google Fonts, the CSS is auto-generated
based on our request.
So here we're asking for the Roboto font family
with 400, 400 italicized and 700.
Now inside this request,
I am first specifying which font family and font weights
and styles I want.
Then I say, add &display=swap,
which adds the display swap property to the CSS.
And that, way the browser will know to swap out
the system font for this custom font
once the custom font is fully installed.
This setup here is the set up you should use any time
you're loading fonts from Google Fonts.
This is the best practice
and this will give you the best performance
possible from Google Fonts.
Anything else won't make any difference.
And if you take any of these pieces away,
it'll make the performance slightly slower.