Using Google Fonts is often one of the first steps people take to give their website a unique look. After all, they’ve been viewed more than 40 trillion times as of this writing. But if you’ve ever brought over that amazing font and ran a speed test, you might be asking – “Does Google Fonts slow down my site?”
It is true that using Google Fonts requires the browser to make additional requests and download the font you’ve chosen, resulting in additional loading time. And if you’ve been dealt the above warning, you might think you only have 2 options.
- Use that awesome font from Google and live with the performance hit.
- Switch over to a system font to avoid the addition
In all honesty, if you find a system font that looks very similar to the font you like in Google Fonts, that might be your best bet. We even have a great guide that can help you decide when to use a system font versus a web font.
However, there is another option! With the proper setup and optimization, you can use that font that compliments your brand without any noticeable effects on how quickly your visitors see your content.
Because if your visitors leave your site because it’s taking too long to load, it doesn’t matter what font you used!
Fix Core Web Vitals
Google released their Core Web Vitals update and the impact could be significant for sites that don’t measure up. This is the right time to make sure your site is passing core web vitals.
Speedy site service can help you fix core web vitals as well as speed up your website load time by a significant margin.
Use coupon SPEEDY50 to get a $50 discount.
Why We Need to Optimize Google Fonts
To load a font from Google, the browser has to:
- Pull the HTML for your site
- Fetch a file at fonts.googleapis.com/css
- Fetch the font file from fonts.gstatic.com
This adds a number of requests and additional page weight to your site, increasing for each font you pull from Google.
Google Fonts API does take some important steps to optimize delivery.
We’ve written before about how to select a font-type, but Google Fonts will do it for you by automatically detecting the browser that is requesting the font and serving the most optimized type possible.
The API also offers built-in browser caching, so that anyone who has already visited your site will only need to download it once (and not on every visit). This is great because your visitors have likely already cached popular fonts like Open Sans and Roboto, so they won’t need to download them again when they visit another site that uses one of those fonts.
However, as you can see from the image below when we implement a font from Google using the recommended method, it gets diagnosed as a ‘render-blocking resource’, and is adding nearly a full second to the loading time.
A render-blocking resource blocks the page from loading until the file has been fetched. In this instance, it’s the CSS file from the Google Fonts server, fonts.googleapis.com. Anything that blocks the page from loading for long is obviously a problem we need to fix.
How to Optimize Google Fonts
While the API does its best to keep from slowing your site down, there are a few things you can do as well to reduce the downside even further. The best part is, it’s fairly simple.
Only use 1 or 2 fonts, and limit the variants
The first tip is easy. Avoid using an excessive number of different Google Fonts whenever possible.
Each font you’re pulling in can add 100-400kb of weight to your page, and it doesn’t take many to double the size of your otherwise lean website. We typically recommend using 1 or 2 fonts for your website. This goes beyond even page speed optimization. Most UI/UX experts recommend the same to avoid overwhelming your visitors with different fonts all over the page.
Secondly, when you begin selecting the font you want, you’ll see a ton of variants you can include. These range from very thin, to very heavy. If you use all of these, you’ll be greatly increasing the size of the files the browser has to pull. Beyond that, there’s no call for it. Typically, you’ll be perfectly fine with regular 400 (you can include italic as well if you’d like), and bold 700.
Host the Fonts Locally
You’ll see that in addition to showing you how to implement the fonts you select, Google gives you the option to download them as well.
The great thing about this option is that it gives you full control over loading, the CSS file, and the font files. This topic tends to overwhelm new website owners/developers, because of the steps that used to be involved.
The process of downloading all .eot, .woff, .woff2, .ttf, and .svg files, then copying them onto your server and finally pasting a CSS snippet to a locally host may sound like too much.
Thankfully, Mario Ranftl thought the same. He created a service to simplify that process and make it so that anyone could get the benefits of hosting Google Fonts locally. Google-webfonts-helper lets you select all of the variations of the fonts you want, select browser support you feel you’ll need, and bam! The CSS and file download are all curated for you.
Optimize Loading
Even with the above steps, Google Fonts may still slow your site down if they’re not loaded properly. Typically the browser will wait until it sees the CSS call font files before it begins the process of loading them.
This is a waste of time because we know we want those font resources. So why not tell the browser that?
We can use the ‘Preload’ resource hint to tell the browser that we want our font files to start downloading right away, not after the CSS is parsed.
As you can see, most major browsers support preload and other resource hints (Firefox is also currently in development to add this). Adding this to your HTML would look like this:
<link rel="preload" as="font" type="font/woff2"
href="./fonts/roboto-latin-regular.woff2" crossorigin>
<link rel="preload" as="font" type="font/woff2"
href="./fonts/roboto-700.woff2" crossorigin>By using this method, you can eliminate the unnecessary wait time that you would normally experience, resulting in a snappier load overall.
Your Google Fonts No Longer Slow You Down!
Using these tips and awesome tools from other developers, you can bolster your brand with amazing fonts, without paying a price for performance.
If you have any questions about optimizing fonts or using Google’s Font API, feel free to comment below as well. In addition, here are some great additional resources about preloading and web font optimization. Let us know how your Google Font optimization goes!
Additional Articles: