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

I see many answers recommending you to download CSS and host yourself. DON'T do this as Google Fonts send different CSS for every browser based on the capability of the browser.

A quick solution can be Easy Fonts CDN that hosts all google fonts, plus provides some value addition like:

1. Long expiry for CSS files. (This will resolve your issue of leverage browser caching)
2. Easy debuggable font file names.
3. Font Classes. You get easy to use CSS classes to use fonts in HTML, like
   ,
   , etc. Complete reference is available here.
4. An option for single all-in-one font file that you can include in all your projects and forget about looking up Google Fonts directory again and again to get new CSS URLs.
5. Saves 1 extra DNS look because Google CSS is hosted in fonts.googleapis.com and actual font files are served from fonts.gstatic.com while Easy Fonts' CSS and font files are both served from pagecdn.io. If you use PageCDN for other opensource resources or if you host your own files on PageCDN, then this will actually save you 2 DNS lookups as all files are served on single host that is used for other files too, and there is no dedicated DNS lookup for fonts.
6. Consistent CSS URLs. CSS for one font family will always load through one URL. This increases browser cache reuse. Google Fonts CSS files mix font family names and create endless possible CSS files. This reduces browser cache sharing across websites.

If you want to use just Open Sans and Montserrat fonts, here is your code:

If you want to use the all-in-one file, use: