How do I 'leverage browser caching' for Google fonts?

Question

I tested my site via Pingdom and got this:

I searched but couldn't find a solution to this. Does anyone know how I can get this 14 to 100?

Answer 1

Not a complete solution, but you can improve the situation by combining the two requests to one:

https://fonts.googleapis.com/css?family=Montserrat|Open+Sans

I do that for two fonts on one of my sites and score 86 versus your 14. Importantly, this is a genuine speedup, not just a hack to reduce an arbitrary score.

Answer 2

Since you cannot control Googles headers (including expiration headers), I can see only one solution – download these two stylesheets and fonts to your own hosting server, change HTML tags accordingly.

Then, you can set expiration headers (what Pingdom called 'lifetime') as you wish.

For example, open the first link:

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Download this .woff2 file and save it anywhere on your webserver. Copy & paste this piece of stylesheet into any of your own CSS files or HTML. Change the link from fonts.gstatic.com to your new URL.

Google serves these fonts with expiration time of 1 day. You could easily set it to 30 days now.