HomeBlogGoogle's Font Replacement

Google Font Replacement API

Published July 28, 2010

Designers of web content, rejoice! Tired of using the same six web safe fonts for all of your websites? Another solution to the boring web fonts problem is now being offered by a collaboration between Google & TypeKit.

For many years, web browsers have actually supported custom font embedding in web pages using simple CSS rules -- even IE6 supports it! But there were always two major roadblocks to universal adoption of the technique: 1) Internet Explorer only supports embedding the proprietary EOT font format, which is designed to convert and embed a regular font file into a format that discourages unlicensed use of the font. Other browsers (like Firefox) only support embedding TTF or OTF files. 2) Web administrators were weary of serving the font file raw, because they could be sought after for illegally distributing the font. Font foundries were weary of allowing designers to embed due to possible widespead distribution and unlicensed use.

Google Font API solves Problem 1. Because the two browser groups support different font formats, it really comes down to a server based solution which detects the user’s browser and serves the appropriate CSS and font format (TTF or EOT). All you have to do is put 1 line of HTML which grabs a CSS file from Google and you’ll have access to apply the font in all browsers including Firefox, Chrome, Safari, Opera, and IE6/7/8.

Google has sort of approached Problem 2 by creating a free font directory which will serve up 18 stylish fonts under an open source license so there will never be a problem using them legally. If you would like to use another font that is not in the Google Font Directory, you can check if it is in the TypeKit directory, and change a few lines of code to point to that provider -- but you have to pay a nominal fee for access to the TypeKit library fonts.

Here is how the Google Font API differs from other techniques:

  • sIFR allows you to use any font you want, and loads everything from your own server. But it does require you to convert your font into a SWF file using a free tool, and it requires Flash support which might slow down the user's browser. Also, sometimes sIFR just doesn’t look right, or parts of the page blink when loading.
  • Cufon is similar to sIFR, but is faster and doesn’t require Flash -- it uses javascript to render the font in SVG or VML depending on the browser.
  • Roll your own - You can serve up your own raw TTF or EOT file from a PHP or other server based script, doing some basic browser sniffing to send the correct CSS & font to the user. This is like what Google & TypeKit are doing but instead you'd be doing it from your own server. But be warned, you aren’t legally allowed to do this for most proprietary font files!

This just in! Google has now added a Font Previewer page so you can dynamically play with the font faces, sizes, and styles right in the browser. When you're satisfied, simply copy & paste the code to use it on your website!

blog comments powered by Disqus


Michael Butler

Michael Butler

Michael joined the RustyBrick team in 2008 to focus on transitioning existing web sites to new & enhanced platforms. He graduated from Rutgers University in 2005 and holds a B.S. in Computer Science.

This article is under Creative, Web Programming

There is 1 comment for this post

Connect With Us

Send Us a Message

Do you wish to give us feedback on one of our apps, send us a message or explore a proposal? Fill out the form below and we'll get back to you pronto!

Visit Us

250 West Nyack Road, Suite #200 West Nyack, NY 10994
Get Directions

Call Us Toll Free