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

Cheetah picture Cheetah · Feb 19, 2012 · Viewed 14.2k times · Source

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

Daan picture Daan · Feb 19, 2012

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.