Google Fonts PageSpeed

Fix Google Font Pagespeed & Load Fonts Faster

February 16, 2022

Google Fonts is an easy way to take your site's style to the next level with some nice custom fonts. However, loading Google Fonts stylesheet into your pages often results in slower load times. This is not only noticed by your users, but can affect how your site scores on Google's PageSpeed Insights.


Table of Contents


Why Speed Optimization Matters

For anyone running an online business, fixing your site's PageSpeed should be a top priority. We live in a world where people expect instant gratification, and aren't willing to sit and wait for a page to load.

Not only do users care about page speed, but so does Google. If you're doing SEO, then making your site load faster could be an easy rankings boost, giving you an edge against competition. Google's Core Web Vitals measures how long it takes for your site to load, and is confirmed as a ranking factor by Google. Google wants to show users pages that will load fast, since Google knows people care about this.

Whether you're doing SEO or running paid traffic, a slow site will hurt your revenue.

As users bounce from your site, getting tired of waiting for the page to load, you're losing out on potential customers. When you're running paid traffic, that means you paid for a click that was wasted.

If you're doing SEO, this higher bounce rate is hurting your rankings. When users click your result in the SERPs, and within seconds hit the back button to go back to Google and pick a new result, that's a terrible signal to be sending Google. That's telling Google that someone really didn't like your page and couldn't find what they're after. On top of Core Web Vitals, bounce rate is an important ranking factor.

How To Speed Up Loading Google Fonts

If your site is using Google Fonts, then there's a few methods you can use for speed optimization. Optimizing Google Fonts is a great first step you can take to speeding up your site, and more importantly, boosting your traffic and conversions.

Selecting System Fonts

If you're not attached to the idea of using custom fonts, then using system fonts that are available on every system is the best option. Using web fonts at all will add to the total page size and slow it down a bit, even with self-hosting. While using custom fonts like Open Sans or Roboto can look nice, consider if default fonts like Helvetica and Arial will do.

Self Hosting Fonts

Hosting a local version of the font files on your site's server is best solution, and our recommended method, for loading Google Fonts, or any web font. This may not be an option if you're using a CMS such as Clickfunnels or GoHighLevel, but with a self-hosted solution such as WordPress or a static site, you can simply upload the font files to your site.

There are a few advantages to using self-hosted fonts. First, it eliminates the DNS lookup. Any time you can eliminate third party resources from your page, it's a great opportunity for speed optimization. For each domain your site loads files from, a DNS lookup, TLS negotiation, and TCP handshake is required, meaning the browser has to look up the IP address where the Google fonts server lives.

Another reason to self-host fonts is to eliminate character support for languages that you won't use. The default Google Fonts CSS for popular fonts like Open Sans supports many more character sets than needed. You'll be loading character sets such as Vietnamese and Cyrillic.

By hosting the fonts and your own server, you can load only the necessary character set and weights. Using Google's service loads many more charsets than necessary with extra font face declarations.

There's a great tool you can use for free that makes this easy. Google Webfonts Helper (https://google-webfonts-helper.herokuapp.com) will generate a zip file containing the fonts you've selected, along with the CSS to paste into your site.

With this piece of software, you can specify where the font files will be uploaded. The default assumes "./fonts", but you can specific a custom font file location. Simply upload the fonts to the appropriate location, remove Google Fonts, and add the provided CSS from this amazing tool.

This sofware has a browser support option. For this option, we recommend selecting modern browsers. With modern browsers selected, you'll only host woff and woff2 versions of the font. Unless you're concerned with loading fonts on very older browsers such as Internet Explorer 8, then with only woff, this option will give you great coverage. The other formats such as SVG and TTF are not required by any current browsers.

If you're using WordPress, then you can use this method to self-host fonts without installing any plugins. You can disable Google Fonts in WordPress, and then upload the font files and CSS to replace it. Our course on WordPress PageSpeed optimization contains a step-by-step video walkthrough on how to do this, along with everything else you need to do for a perfect PageSpeed Insights score on your WordPress site.

Add Resource Hints For Font Files

Whether you're locally hosting or using Google hosted fonts files, adding resource hints to preload resources is always something you should try. Resource hints, such as rel preload, give the browser a hint about what files will soon be needed so it can start downloading them ahead of time, giving them a higher priority. Without a resource hint, fonts are given a default low priority.

Take a look at this sample code to preload font files. You can use similar code to optimize Google Fonts whether you're serving the files from your server, or letting Google host the files.

<link rel=preload as=font href="https://example.com/fonts/font-file.woff2" crossorigin>

If you've used the previously mentioned Google Webfonts Helper as recommended, you'll have both a .woff and .woff2 file type. Don't bother adding preload for the woff version, only the woff2. Older browsers without woff2 support don't support preload, so this optimization only applies to more modern browsers.

Note the "crossorigin" attribute in the example code above. This is always required for font files, even when the files are actually on the same domain as your pages. Without this, the browser will download the font file twice and the preload will only serve to slow down your site.

Self hosting plus preload is usually the best option for loading fonts. When using resource hints, however, it's always best to test your site before and after and make a decision based on the results. It's possible that your site has other resources that are more important and preloading will hurt the overall load time. Loading all resources with the appropriate priority is important to the overall load time.

Use Font Display Swap

If self-hosting files for the fonts on your own server isn't an option, then you can still load fonts hosted by Google a better way.

Even if you're using Google Webfonts Helper to host fonts yourself, take a look at all the sample code below. You'll need to add a CSS property to the CSS generated by the tool.

The way Google Fonts loads by default can result in invisible text as the files load from Google's servers. You can have the Google Fonts API deliver a CSS file that uses the font-display property to fix FOIT (flash of invisible text).

Google Fonts stylesheets can be loaded with font-display swap like this. Notice how this is not a font file, but a CSS file that then loads the font files.

<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">

Notice the "display: swap" parameter has been added to the end of the URL. The resulting CSS file contains the following code. You'll see the line of code "font-display: swap" within this font face declaration. Note that Google will deliver different fonts for older browsers, such as woff and ttf, but the benefits of locally hosting outweigh this.

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Google Fonts now enables this option by default, but it's possible the fonts CSS in your site is outdated, or a piece of software you've used has inserted Google Fonts without font-display swap enabled.

Adding font-display can result in another issue, called flash of unstyled text. This means that users may briefly see a default system font appear before the custom font can load. This pesky transition is preferable to the alternative, flash of invisible text, since this way visitors will at least be able to see your content as the font files load. This issue with invisible text leads to long first paint times, part of Google's Core Web Vitals.

There are some other options for font-display that you may want to consider. These options include auto, block, swap, fallback, or optional. For more information on what these options do, see Google's in depth explanation here.

Load Google Fonts Asynchronously

Typically, when you load CSS into you page, the browser waits for the CSS call font files to load before it continues loading the rest of the page. You can use a little trick for asynchronous CSS loading, forcing the browser to wait until the rest of the page loads before loading your font files. This will give it a low priority when compared to other assets in the page.

If you don't find the flash of unstyled text, then using this method will ensure your page loads and is usable as fast as possible. It will eliminate render blocking CSS from your page, so the browser won't get hung up on download the CSS file for your fonts from Google.

See the code below for an example of how this is done:

<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" media=print onload="this.media=all">

By setting the media attribute on this link tag, we're instructing the browser to not load the CSS file for displaying the page on screen, only when it's being printed. Then, once the page is loaded, JavaScript runs and changes the media property to "all", causing it to then load. This little hack is the easiest way to load asynchronous CSS, and eliminate render blocking resources.

Use A CDN Service

One benefit to using Google Fonts is you can take advantage of their reliable content delivery network. While this is somewhat offset by the extra DNS request, the CDN service offered by Google does mean users from around the world can always have quick access to your fonts.

If you've self-hosted your fonts and a looking for the next step to speed things up, you should use your own CDN. We recommend setting up Cloudflare. This can be done in just a few minutes, and can shave as much as 100MS from your time-to-first-byte, or more depending on geographical location and physical distance from the server. You can think of this like the latency time, how long it takes browsers to talk to the server where the files are hosted and start receiving request resources.

To Sum Things Up...

Google Fonts are a great way to customize the appearance of your site, but will significantly slow down your load times. The best way to handle this is to locally host the file files, use font-display: swap, and to consider preloading your font files.

At Fastify, we've spent years learning how to optimize our websites to give ourselves a competitive edge. If you're looking for more resources, check out the rest of our blog. We also offer a step-by-step video walkthrough course for WordPress webmasters that will help you acheive a perfect 100/100 score in PageSpeed Insights, mobile devices included. If you're looking for someone to handle it all for you, then we'll optimize pages built in any CMS for you with our consulting services. We guarantee a faster site and more conversions, or your money back.


Written By 
Mason Wiley
My name is Mason, and I cofounded Fastify after years of experience with SEO and affiliate marketing in a highly competitive industry. I've worked through countless pages of documentation and ran countless experiments to find all the hidden secrets to making screaming fast pages.
menucross-circle