@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

You code only works for browsers that support WOFF for downloadable fonts. This is a direct consequence of just ripping off some code sent by the Google server to some browser. The Google server sends different CSS code to different browsers, and your code breaks this. Moreover, there is no guarantee that the URLs will keep working. URLs like http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff should not be expected to be stable, and Google has made no statement about supporting the use of such URLs.

You can proceed with the rip-off strategy, with its drawbacks, by simply viewing, in your browser, the CSS code of a page. For example, on Firefox, you could use the Web Developer Extension, which has a command for viewing all CSS files for a page. Then you would copy the content of the relevant CSS file.

A better approach—assuming you don’t want to use fonts as hosted by Google—is to download the font files from Google (the Google Web Fonts pages have an interface for that, too, though they keep telling you don’t need to use it) and then generate the various font formats and a CSS file e.g. with FontSquirrel WebFont Generator. The results may differ from those you get by using Google-hosted fonts; Google does not disclose exactly how their font files have been generated.

Answer 2

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;