Are you trying to achieve 100/100 on google page speed insight? Maybe stuck with leverage browser cache warning.
I know that feeling, but you don’t have to worry much. 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.
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 most browsers and devices
- No reliance on third parties
- Use several different fonts and weights
- Modern and well-documented method
How to host Google fonts locally
- 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).
- 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 new folder called ‘fonts’ in wp-content directory ).
Now Copy and add the CSS in your child theme or custom CSS panel.
I use MyThemeShop themes and they have an easy custom CSS panel which I use. If your theme doesn’t have this, I recommend the free WP Add Custom CSS plugin.
It’s that Easy; Now Fonts will load from local resource only which means no more leverage browser caching warning. If having any issue, Please let us know in comment box below.