How to use Google webfonts the right way. Hosted by You!

Here is how you get the fonts on your Webspace. Just go too google fonts and pick a font and click fast use as usually. You will get something like this:

<link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>

Take the html or the css code, take the url from it and paste it into your browsers address bar. Some css like this will show up.

@font-face {
  font-family: 'Condiment';
  font-style: normal;
  font-weight: 400;
  src: local('Condiment'), local('Condiment-Regular'), url('http://themes.googleusercontent.com/static/fonts/condiment/v1/H3zUdSYh9r5ccxclUWaH7j8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

Now copy this code to the top of your css file for your theme/site. There is a url to the .wuff font in there, download the Font (all fonts are open source), rename it to its actual name and put it somewhere near your css file like ‘./fonts/condiment.wuff’

Last step is to change the css from earlier to make the font load from your site not from google.

src: local('Condiment'), local('Condiment-Regular'), url('http://themes.googleusercontent.com/static/fonts/condiment/v1/H3zUdSYh9r5ccxclUWaH7j8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');

into

src: local('Condiment'), local('Condiment-Regular'), url('fonts/condiment.woff') format('woff');

Thats it!

I think its always good to be independent. I don’t trust Google and even if i would it would still make no sense to load such small fonts from Google. Its such an overstatement to call this an API, its nothing more then storing fonts in strange generated filename. And the fonts will work this way even of you don’t have a internet connection and you are testing your site on a local server.

Speak Your Mind

*