Using Google Web Fonts

Web Fonts are a big thing in Web Development at the moment and I think they will be for a long time to come.

While there are very good paid font libraries like Typekit or myfonts.com or the relatively new cloud.typography.com by the awesome H&FJ there is still the Google web fonts library, which contains a lot of really good free to use fonts.

What I did in the past was, I downloaded the fonts I wanted to use to host them on my on server for having total control and minimising my http requests. But a while back Sergej and I discovered that you shouldn’t do this even though you can. And here is why:

If you use one of the solutions Google presents you with, they will actually serve different, optimised font files depending on the browser and OS of your visitor.

Awesome, right?

I for one place the link tag in the head:

<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

For a little performance boost you can add this line to your head before loading the font to prefetch the Google Fonts DNS:

<link href="//fonts.googleapis.com" rel="dns-prefetch">