Google Fonts are a wonderful free resource that can bring a little extra delight to the design of your site.
One of the things that I like about Google Fonts is that it gives you an indication about how much slower your site mgiht be as a result of including the different fonts onto your site.
As you can see below, we’ve got a Load Time: Moderate based on these 5 fonts.
Then if I add more weights to those Fonts we move on to Load Time: Slow — you never want to see slow… you want to keep it fast!
.inline-perf {
font-family: ‘Faster One’, cursive;
font-size: 3.2em;
}
Let’s say that you pick a particularly heavy Google Font which you only want to use for the heading of your site, let’s say it’s the title of a site about performance like below
Perf
Well, we can then add the &text= parameter onto our link declaration and include just those characters… so instead of just having
<link href=”https://fonts.googleapis.com/css?family=Faster+One&display=swap” rel=”stylesheet”>
we include….
<link href=”https://fonts.googleapis.com/css?family=Faster+One&display=swap&text=Perf” rel=”stylesheet”>
Google estimate that this will reduce the request size by up to 90% which is awesome, and also gives your designers potentially a little more leway to add another Font without impacting performance.