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

Question

I tested my site via Pingdom and got this:

I searched but couldn\'t fi

Answer 1

First of all it's important to clarify the distinction between caching the Google Fonts CSS files and the actual font files. According to the Google Fonts FAQs, their font files are actually cached for a year. It's the CSS files that are cached for 24 hours:

Requests for CSS assets are cached for 1 day. This allows us to update a stylesheet to point to a new version of a font file when it’s updated, and ensures that all websites using fonts hosted by the Google Fonts API will be using the most updated version of each font within 24 hours of each release.

The font files themselves are cached for one year, which cumulatively has the effect of making the entire web faster: When millions of websites all link to the same fonts, they are cached after visiting the first website and appear instantly on all other subsequently visited sites. We do sometimes update font files to reduce their file size, increase coverage of languages, and improve the quality of their design. The result is that website visitors send very few requests to Google: We only see 1 CSS request per font family, per day, per browser.

I would recommend against hosting these CSS files yourself, as you will fall behind and not be using the latest versions of the fonts as they're updated.

However, there are a couple ways you can speed up the CSS request:

1. As Mark mentioned in his answer, you can combine your two webfonts into one request: https://fonts.googleapis.com/css?family=Montserrat|Open+Sans
2. If you're only using a certain styles of either font you can only load the styles you are actually using. Here we're loading all of Montserrat, but only loading three styles of Open Sans; regular (400), italic (400i), and bold (700):