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 |
|
|
Generate JavaScript Font files and get the source here: Cufon |
| CSS3 |
|
|
Get free fonts and ready to use CSS3 code from FontSquirrel.com. |
| Google WebFont Loader |
|
|
Read through this to get started writing code. |
| Google Font API |
|
|
Google Font Directory |
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
And what about text smoothnes (anti-alias) for example on IE + Win?
Great information. To me Google font API would win the race.
[...] Cufon vs CSS3 vs Google Font API « Zoom Creates Blogs [...]
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)
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.
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
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.