5vrdkg
Last Updated: April 27, 2016
·
30.31K
· mkjones
Wcuk

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.

Say Thanks
Respond

5 Responses
Add your response

9311

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 ·
15899

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 ·
16095
41d348d12f3fc3c964d7b7f9ec385656

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 ·
18313
B6ada7b679e9d50271d11968e274739f normal

Thank you!

over 1 year ago ·
20851
None

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 ·