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.
Related protips:
Written by Kimb Jones
Related protips
5 Responses
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.
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.
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
Thank you!
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.
Have a fresh tip? Share with Coderwall community!
