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 allow you to download the Woff/2  format. And, default TTF format is much larger in file size which obviously isn’t what you want when trying to make your website faster.  (explained here)

  • Search fonts you would like to use. ( Try to stick with one or fewer font styles)
Leverage Browser Caching Google Fonts 1
  • 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.
Leverage Browser Caching Google Fonts 2
  • 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 almost all of my visitors on this site use latest versions of the browser (Now I shifted to web safe fonts).

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.

Leverage Browser Caching Google Fonts 3

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.

4
Leave a Reply

  Subscribe  
newest oldest most voted
Notify of
farhan asif

Very nice and infromative post..Thank you for sharing it..Keep up the good work..

Hazrat Bilal

nice information

Jonathan

Thanks for your help, I was stuck on this from a long time… Finally caching google fonts. cheers 🙂