18

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');
}
Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
Cheetah
  • 13,785
  • 31
  • 106
  • 190
  • See also http://stackoverflow.com/questions/7203871/google-fonts-external-css-vs-copying-the-code-of-external-css-in-my-css – Paul Wagland Jun 03 '13 at 08:55

3 Answers3

26

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.

Daan
  • 3,403
  • 23
  • 19
8

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.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • Yeah that does make sense. Thanks. – Cheetah Feb 19 '12 at 16:35
  • 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! – Sterex Sep 22 '13 at 11:54
  • 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) – AsTeR Sep 01 '14 at 18:58
  • 2
    @Sterex 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. – Pekka Sep 01 '14 at 23:49
1

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

Shawn Taylor
  • 3,974
  • 4
  • 17
  • 23