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

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.

Answer 2

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): <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,400i,700" rel="stylesheet">

Answer 3

A fairly easy workaround would be to generate your own kit with Font Squirrel's Webfont Generator:

https://www.fontsquirrel.com/tools/webfont-generator

To be able to use this, you would need to download the fonts (Montserrat and Open Sans are both available on Font Squirrel) and add them to the generator. This can be used for adding further customization. (I've used it many times in cases where the font in Google Webfonts didn't have the necessary subsetting for Hungarian language even though it was available in the original font.)

Answer 4

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 5

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 <div class="font-open-sans"></div>, <div class="font-lato"></div>, 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:

<link href="https://pagecdn.io/lib/easyfonts/montserrat.css" rel="stylesheet" />
<link href="https://pagecdn.io/lib/easyfonts/open-sans.css" rel="stylesheet" />

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

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />

Answer 6

What I got to work was adding PHP as a post-processor to my CSS files in my .htaccess file with the code (I'm using a custom .pcss file extension - just to make it separate from my simple CSS files):

<FilesMatch "\.pcss$">
SetHandler application/x-httpd-php
Header set Content-type "text/css"
</FilesMatch>

Then I used the following code in my CSS file to get and echo the content of the font URL I wanted.

<?php
echo file_get_contents("https://fonts.googleapis.com/css?family={FONT}");
?>