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.