- [Instructor] At the start of the course,
we talked about performance budgets
and I mentioned web fonts can have
a significant negative impact on any performance budget.
Now that you know how web fonts load and work,
I hope you see why.
The question then is how do we deal with web fonts
if we have a tight performance budget?
Here are some suggestions and recommendations.
First of all, decide if you need to use a web font at all.
If you have a tight performance budget,
it's worth the effort to investigate
system fonts as alternatives.
Browsers have a lot more system fonts available now
and many of them are quite nice.
You'll actually notice a lot of online services
are just using a system fonts instead of web fonts
because of the performance benefits.
If you need to use a web font,
make sure you limit the number of font families you use.
Ideally, you should only use one,
or an anything more than two really needs
a pretty good reason.
Remember, every new font family you add
has a direct impact on your performance
because every new font family means a new set of font files
that need to be downloaded.
When picking a web font,
make sure you limit the character set of the font
to only what you need.
This reduces the file size for the font file.
If you go through a font service,
you'll quickly notice you can extend the character set
by adding Cyrillic characters, or Asian characters
of various different kinds.
If you do so, you need to do it
because you need those characters,
otherwise you're just downloading font files
you'll never use.
To hit the initial performance budget,
you may want to defer loading of the web font
using the critical CSS strategy we covered earlier.
This seems counterintuitive
because it will cause the font to change
when this new style sheet is eventually loaded
in the browser,
but if performance is your top priority,
it may be necessary.
If you go down this path,
make sure your fallback font matches your web font closely
and remember, it's not a huge issue if you do this
because the reloading of the font, or the swap of the font,
will only happen on first load.
Once the browser has already downloaded the font,
it'll sit in the browser cache,
so the next page the user navigates to
will already have the right font,
and if they go away from the site and come back to it later,
a couple of days or something like that,
they'll still have the same cache,
they'll still have the custom font in the cache.
And that brings me to the final point.
Make sure your web fonts are cached for future use.
Font files are automatically cached by the browser
and you can extend the life of the cached fonts
because they rarely get changed.
This ensures the browser doesn't need to re-download
font files every time a page reloads.