Last Updated: April 27, 2016
·
47.47K
· mkjones

Google Fonts using @fontface in your .css

In this example I'm using the 'Racing Sans One':

http://google.com/webfonts/specimen/Racing+Sans+One

First off, hit the 'Quick Use' option in Google Fonts, this will give you a URL to link into your header.

Instead of linking the URL open it in your browser:

http://fonts.googleapis.com/css?family=Racing+Sans+One

This will give you the following code that you can then copy and paste into your .css file:

@font-face {
    font-family: 'Racing Sans One';
    font-style: normal;
    font-weight: 400;
    src: 
            local('Racing Sans One'), 
            local('RacingSansOne-Regular'), 
            url(http://really-long-url.woff) format('woff');
}

Note: The 'local' attributable checks if font is on users local device. This is great for development. However, it's not bulletproof. See:

http://paulirish.com/2010/font-face-gotchas/#smiley

...for more info on how to fix this during production.

You can also download any Google font and embed from your web server as .ttf by adding:

url('/yourfontfolder/RacingSansOne-Regular.ttf') format('truetype'), 

To the stack above.

5 Responses
Add your response

Awesome to know. I've been using this on several websites but didn't realize you could just go to the link that they generate and pull the @font-face from there. Very nice. Thanks for sharing.

over 1 year ago ·

Attention!
Google font api uses browser detection (to satisfy ALL browsers)..
This means, that if you just open http://fonts.googleapis.com/css?family=Racing+Sans+One and grab the css (to use with own font-face), it will only work for the specific browser you opened that page with.
If you spoof the useragent or open with an other browser, you will se that google font api content will change. woff2/woff/ttf/svg/etc.

over 1 year ago ·

ohmish is right... I once used this method in an effort to try and reduce HTTP requests, but found the fonts didn't work in older browsers like IE8 because they were given unsupported fonts. Probably should remove this article so not to steer people in the wrong direction

over 1 year ago ·

Thank you!

over 1 year ago ·

Yes, the approach suggested in this article is really a bad idea. If you look at the CSS Google spits out it becomes pretty obvious that it would be difficult to cobble together something that would consitently support a wide range of browsers. This article should be removed.

over 1 year ago ·