Should I locally store CSS generated by the Google Web Fonts API?

Question

I am using some Google Web Fonts. I hear that Google deal with all the issues between different browsers and serve different media depending on the browser in the request header.

My question is, at what point does it do this?

Reason being is that for the API you can simply include a CSS file which contains the @font-face request. Can I simply include that CSS in my own CSS file, thereby saving a HTTP request, or does that CSS change depending on the browser that requests it?

I really hope that makes sense.

E.g., Google suggest you include the following in your CSS file:

@import url(http://fonts.googleapis.com/css?family=Exo);

the contents of which are:

@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 400;
  src: local('Exo Regular'), local('Exo-Regular'), url('http://themes.googleusercontent.com/static/fonts/exo/v1/ZcGd2dvMSgl3mHN3lKAjNw.woff') format('woff');
}

Answer 1

The CSS served up by Google Webfonts changes depending on the user agent in the HTTP request header, so you'd be better off using @import. The reason is the different implementations of web fonts in different browsers.

Answer 2

Not an answer to your exact question, but even if it were possible at the moment, I would never locally cache any CSS that Google serves "live" because:

• even if it works now, it may break later if they change something

• you do not add any reliability, because the font itself still has to be fetched from Google

• you do not really improve performance much: if everything is configured correctly, the HTTP request will happen only once and be cached thereafter. Also, the user may have the font CSS cached from another site that uses Google Fonts.

Answer 3

If you want to store local CSS then you MUST store font locally too because otherwise it will again have an extra HTTP request.

And Google allows downloading font for local usage but you can check for web too. https://developers.google.com/webfonts/faq