GuideWordPress Tutorials

Leverage Browser Caching Google Fonts

Do you hate Leverage Browser Caching Google Fonts warning?

When You test for website performance with speed Testing tools such as Pingdom, GTmetrix or even Google PageSpeed Tools.

You normally get a suggestion to “Leverage Browser Caching” for Google Fonts if you are using Google fonts.

warning Leverage Browser Caching Google Fonts
People normally expect Google, who actively advocates PageSpeed to cache their own fonts.

However,

Google wants to be able to modify the fonts & other scripts anytime quickly that’s why they don’t support long-term Browser cache.

If you are trying to score 100/100 on google page speed insight or any similar tool, You Maybe stuck with leverage browser cache warning.

I know that feeling,

Want to know a secret?

It’s quite easy to fix the problem by hosting Google fonts locally (on your server) or CDN.

What does it really mean to host fonts locally

The majority of websites these days use Google or Typekit fonts. And hosted on Google or other third-party servers.

When someone visits your website, fonts have to be download from third-party servers each and every time which can’t be cached by the browser. Because you have no control over it.

In simple words, when you download those fonts and serve it from your server and even better if you can afford CDN. You can control the cache and get over latency issue.

The term caching means temporarily storing data–

Web browsers consistently save data from websites like images, files, and pages on visitor hard drive and don’t need to download the same resource twice. As a consequence, websites appear faster on visitors screen.

Benefits For Hosting Fonts On your server

The Biggest advantage is speed. Because for some reason Google doesn’t allow fonts to be cached by browsers.

The good thing about self-hosted fonts is

  • Caches extremely well
  • Support for all browsers and devices
  • No reliance on third parties
  • Use several different fonts and weights

How to host Google fonts locally & Leverage Browser Caching

When You test for website performance with speed Testing tools such as Pingdom, GTmetrix or even Google PageSpeed Tools.

You normally get a suggestion to “Leverage Browser Caching” for Google Fonts if you are using Google fonts.

You might be wondering, Why not download fonts from google instead of the third party?

The reason is simple Google doesn’t support the Woff/2  format and you can only use TTF format which is much makes file size much bigger and you will not get desired performance upgrade.  (explained here)

  • Search fonts you would like to use. ( Try to stick with one or fewer font styles)

  • In my case, I use Montserrat fonts, so I searched for that.
  • Next, you will have the option to choose the different styles. In general, 400 is for regular texts and I am using 700 for Headings.

  • Next, you will have two options to choose one only support modern browsers or you can choose Best Support(includes support for the really old version of browsers).

local font selection

I personally choose Support for modern browsers only, As most of my visitors on this site use latest versions of the browser.

You can check what type of browser your audience is using in Google Analytics

  • When you choose any option CSS and font format will change accordingly.
  • Now download your fonts > unzip your fonts folder and upload it to your server. (  For WordPress create a new folder called ‘fonts’ in the wp-content directory ).

download fonts

Now Copy and add the CSS to your child theme or Additional CSS panel in WordPress Customizer settings.

copy css to host fonts locally

Remember Before you copy CSS, You need to change the file path where you will store your fonts. You can either do it manually if there is an option under your CSS code to customize folder prefix

If you are using CDN service with custom domain such as http://cdn.yourdomain.com use the same URL as it will make sure that browser download fonts from your CDN only.

It’s that Easy; Now Fonts will load from local resource only which means no more leverage browser caching warning. If having an issue, Please let us know in comment box below.

If you like this article, share it with your friends and give us thumbs up on Twitter or Facebook.

Show More

Related Articles

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close
Close