@font-face with Google font

Question

I am already using a font from google, and it works as expected :

@font-face {
    font-family: 'Chivo';
    font-style: normal;
    font-weight: 900;
    src: local('Chivo Black'), url(http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

Now I need another font from google and I don't know where to pick that url. The only url I can see on google fonts is (e.g for this font) is:

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

But the googleapis url does not work, if I replace the src with that url no font is loaded.

Answer 1

To locate all of the Google fonts you can go here:

http://www.google.com/fonts

Using @ font-face with google fonts is not recommended...

They will (and should) host all of the "google" fonts for you. Having you host them in a new location is simply bad form... If another user visited a site with the same font, but served up form google, they would have to do a new server call to YOUR location...rather than use the cashed version google has.

To use multiple fonts, place a pipe character (Shift + Backslash = | ) in between the names in the link tag:

<link href='http://fonts.googleapis.com/css?family=Audiowide|Exo+2|Rambla|Scada' rel='stylesheet' type='text/css'>

And then to your font family tags can call the appropriate fonts as needed:

font-family: 'Audiowide', cursive;
font-family: 'Exo 2', sans-serif;
font-family: 'Rambla', sans-serif;
font-family: 'Scada', sans-serif;