The following cacheable resources have a short freshness lifetime - Google fonts

Question

Hi I'm using https://tools.pingdom.com to test my wordpress site speed and I have an F for Leverage browser caching, it says:

The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:

https://ssl.google-analytics.com/ga.js

https://fonts.googleapis.com/css?family=Droid+Sans

https://fonts.googleapis.com/css?family=Lora

https://fonts.googleapis.com/css?family=Merriweather+Sans:300,400,700

What else do I need to add to my .htaccess file? I already have this:

EXPIRES CACHING

ExpiresActive On

ExpiresByType image/jpg "access 1 week"

ExpiresByType image/jpeg "access 1 week"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 week"

ExpiresByType text/css "access 2 month"

ExpiresByType application/pdf "access 2 year"

ExpiresByType text/x-javascript "access 2 month"

ExpiresByType application/x-shockwave-flash "access 2 month"

ExpiresByType image/x-icon "access 2 year"

ExpiresDefault "access 2 days"

ExpiresByType video/mp4 "access 2 year"

EXPIRES CACHING

Solution

Only way to do this would be to download the stylesheets/fonts and add them to your server, since you can't affect Google's 1 day expiration headers.

Open your https://fonts.googleapis.com/css?family= links and get the individual fonts, for example: https://fonts.gstatic.com/s/droidsans/v6/s-BiyweUPV0v-yRb-cjciPk_vArhqVIZ0nv9q090hN8.woff2

Download that and save it to your server. Now you can use the same styles as in the google stylesheets but inside your own css file. Make sure to change the fonts.gstatic.com link to the file on your server.

If you don't want to do that then a better way to handle your requests is like this:

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//ssl.google-analytics.com">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Droid+Sans|Lora|Merriweather+Sans:300,400,700">
<script src="//ssl.google-analytics.com/ga.js" async></script>

EDIT 12/2: The reason you wouldn't want to do this is because Google may update the font, however, fonts don't really get updated that often.