Cufon vs CSS3 vs Google Font API

Dynamic
Fonts are fun!

(this box built with CSS)

As Greg has mentioned in a previous post, using Google’s Font API you’re are no longer limited to “web-safe” fonts! We all love Arial and Times, but there are thousands of other really cool fonts to play with too. Here I’ll compare some options for using custom fonts on the web.

We used to have to use Cufon if we wanted a fancy font on our web page. It was quickly dismissed for a few reasons, the main reason being that it rendered the text as an image. That meant the text could not be selected using the mouse like regular text. It couldn’t be cut and pasted as text. It was more difficult to mimic hyperlinks with different styles on the hover state. There was a slight delay while the browser generated the image (which was generated each time the page loaded). And on and on. Generally, using an image for text is a bad, bad idea.

Well, with CSS3, came @font-face. Now with CSS we can specify a font file to use on any text. Just upload your font file and use @font-face to give a name to the font file. Then just use that font name in your CSS as you normally would. Here’s a simple example:

1
2
3
4
5
6
7
8
@font-face{
	font-family: 'MyFont';
	src: url('/fonts/myfont.otf');
}
 
p{
	font-family: 'MyFont', sans-serif;
}

This sounds like the perfect solution, but browser support is varied. The above code should work with Google Chrome and Firefox, but not IE. Fortunately, FontSquirrel.com provides free fonts AND ready-to-use code that works well in all modern browsers!

An even easier solution is Google’s Font API, explained here. With Google’s Font Directory, you have about 18 fonts to choose from. Just pick a font and copy in the one line of code. One advantage is speed – your visitors may already have the font cached.

You can use Googles WebFont Loader to choose from even more fonts. It allows you to load fonts from Google’s Font Directory, TypeKit, or other web-font providers.

Let’s look at the pros and cons of each of these:

Pros Cons More info
Cufon
  • Works in all modern broswers
  • Renders text as images
  • relies on JavaScript
  • you must convert your font file to a JS file
  • Too heavy to use on entire page
Generate JavaScript Font files and get the source here: Cufon
CSS3
  • Easy to use
  • Can work in all modern browsers
  • Can be tricky to make it work in all browsers if you try to write it yourself
Get free fonts and ready to use CSS3 code from FontSquirrel.com.
Google WebFont Loader
  • Thousands of fonts to choose from
  • Flexible and feature rich
  • Works on all moderm browsers
  • Not the easiest option
Read through this to get started writing code.
Google Font API
  • VERY easy to set up
  • Works in all modern browsers
  • Font selection is limited
Google Font Directory

Tags: , , , , ,

9 Responses to “Cufon vs CSS3 vs Google Font API”

 
  1. Shiva says:

    Using the Google API is great, except the font library is so limited. In most cases using @font-face generator from Font squirrel at this point has more range of font. Cant wait for Google to increase the font library

  2. And what about text smoothnes (anti-alias) for example on IE + Win?

  3. Sri says:

    Great information. To me Google font API would win the race.

  4. this is exactly what i was looking for. thanks for boiling it all down. i stumbled upon cufon and wasnt really sure what it was (and still seems kinda weird to me)

  5. dogboy says:

    The Google Font Directory has grown substantially since the this post was written. I think that puts it up as the best choice for font selection and its very easy to implement.

  6. Google is up to 271 font families now and their new interface makes them even easier to browse and select.

    http://www.google.com/webfonts#ChoosePlace:select

    There is also a plugin for WordPress that makes it easy.

    http://wordpress.org/extend/plugins/wp-google-fonts

  7. Google Fonts has increased, but Cufon, still is the leader, especially when you need not-your-usual-fonts

    There are sites that boast 9k cufon fonts. Google is far away from that.

    If you are doing large amounts of text, then Google is the way to go, but for things like Website Titles, Cufon can be a lifesafer. A lot of times its either Cufon, or Photoshop and upload with Transparent background.

  8. Great info. Lucky me I came across your site by chance (stumbleupon).
    I’ve saved as a favorite for later!

 

Leave a Reply