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');
}

Sophomore

See also #7204371 – Lupien

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.

Jailer

Technically the answer to my question. Thanks. – Sophomore

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.

Mach

Yeah that does make sense. Thanks. – Sophomore

Not withstanding your third point, if the font is also served by the local server, it makes sense to have the CSS also reside locally. Also, since you mentioned the "live" buzzword, I'd rather store the "live" content locally to allow for consistent user experience on my website rather than a broken one when Google decides to change something, which they are known to do... a lot! – Lizzielizzy

Reading all your commands I would suggest to proxy request to Google font (for speed) and caching the results (for being able to get changes as they come) – Dante

@Lizzielizzy show me an instance where Google has broken a publicly accessible resource that it has promised to host indefinitely, like a web font. I don't thin you'll find one. – Mach

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

Abridgment