How to add Google Web Fonts directly to your stylesheet

If you're using a CMS such as Drupal or Wordpress, it's not possible to add the link tag for the css file that google provides you&ndash; i.e. <link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>&ndash;without installing a module that would allow it (and who wants another module to maintain?).

Here's a quick workaround I discovered that makes it really easy to simply add the css code you need directly to your stylesheet. If you look closely at the link code that google provides, it's for an offsite style sheet. Simply take the URL of the href attribute, put it in your browser, and open it. Now you have the css code! What's happening behind the scenes is Google's server side processing (likely php, ruby, python, etc) is simply constructing the necessary css code according to what the the URL parameters are. 

Example:

Put that URL in your browser, you'll get this code:

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: local('Oswald Light'), local('Oswald-Light'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: local('Oswald Bold'), local('Oswald-Bold'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}