Font replacement strategies

I’ve tried many different methods for font replacement on my site.  I just can’t help wanting to use a fancy font.  I just switched techniques, but here is the complete rundown.

Cufon. A JavaScript implementation that uses Canvas tags to change the fonts of specified tags.  It uses jQuery to find the fonts and a special JS file that you feed into the Cufon Generator to make the script.  Source here.  WordPress plugin here.  It’s pretty easy to use, but can be a little slow.  Also, you can’t select/copy any of the text in the canvas tags.

sIFR. A Flash implementation that changes your tags into flash movies.  They can be selected/copied, which is good.  WordPress plugin hereFeed your TTF to this tool and get the SWF.  I had issues in font-size.  Also, it seemed just as slow as Cufon, if not slower.

Flir. This is a PHP implementation where the server creates images on the fly and caches them.  WordPress plugin here. No select/copy, but it seems to be a bit faster than the other methods.

Font-Face. This is a purely CSS3 implementation.  No JavaScript or Flash required.  It works on all browsers.  It’s much faster than the other methods.  I chose this one from now on.  I really should have done this before, but I just never got around to it.  It’s pretty easy.  You pop your TTF files into a directory and then use the right syntax.  If you want IE to work, you need to additionally convert the ttf into an EOT file.  Why Microsoft?  Why?  Anyway, it’s pretty easy to do.

I also added in my own drop down box at the top right of the blog.  It uses jQuery and the Cookie plugin to let the user select a font.  I used PHP to read the cookie and build the CSS for the page on the fly. It seems to be working much faster and the implementation is pretty easy.

I imagine a wordpress plugin could be made to automate this. You upload a TTF and it generates the EOT, saves it to the directory and makes the CSS on the fly. Hmm, maybe someone will make it.

Code I used:



Leave a Reply