How do I use web fonts and @font-face?

Get Started
1

I’m using some fonts from Google’s web font service and had a quick question about where to include the link in my code.

According to Google’s getting started page, I include this bit of code into the header <link rel=“stylesheet” type=“text/css” href=“http://fonts.googleapis.com/css?family=Font+Name”>, and then reference it normally in CSS.

But what about this @font-face CSS?? I’ve read a lot about it, but should I use this instead of the above? Or do I have to use it in conjunction with it?

Any pros / cons to using one method over the over?

Thanks!

2

As it says on the Google page, you just need to specify the font in your CSS on any element that needs to use the font. E.g.

h1 {
  font-family: 'Google font', serif;
}

All the @font-face stuff is taken care of by the Google link that you paste in the header section.

Mind you, if you can get Google fonts to work, you’re a better man than I am, Gunga Din. I find them flaky as hell. I much prefer FontSquirrel fonts.

3

Thanks.

So should I use @font-face instead of the Google font?

And that will require me to host a local version of the font on my site, right?

4

I would recommend using FontSquirrel fonts, if they have the available font, and yes, that would mean hosting the font yourself. Mind you, there’s no reason not to use the Google font if it works for you. The link that Google gives you will have the @font-face rule too, so either way, you are using @font-face. And Google assets tend to load very quickly, which could be an advantage.

The idea of Google fonts is great, it’s just that I’ve had trouble with them, but others around here think they are great, so there’s no problem using them.