Thanks to current lack of support for and other licensing issues regarding @font-face, we have to turn to other methods of using special fonts on our web pages. But what to choose? There are several great proven methods out there for font face replacements on a website, so today we’re going to take a look at 4 of the bigger ones that I have taken for a spin. I’m going to list for you the pros and cons that I discovered for each method.
- Very easy setup
- Supports all of the necessary browsers
- Usage is limited due to fonts being embedded. There are not many fonts out there that are permitted to be used with this method
- Text is not selectable in most cases
Cúfon is the latest addition to this roundup, and it is also my new favorite. It uses the same technology and method as Typeface to draw the font (Canvas and VML), therefor it has an extremely similar Pro and Con list to typeface. The only difference is a slightly easier implementation. I first found out about Cúfon through Cameron Moll’s blog, which I would highly recommend checking out his post on Exploring Cufón, a sIFR alternative for font embedding where he discusses it and writes a quick tutorial on using it.
- Any font can be used, sIFR does not violate EULA’s.
- Out of the 4, I would say that sIFR is by far the most complicated to set up
- Requires two browser enabled technologies instead of one.
- It loads slower than the others. There seems to be a visible delay no matter what
sIFR was great when it first appeared onto the scene, but the only reason I can see that you would want to use it over any others now is if you have a font that has an EULA preventing you from using one. Here are some nice sIFR resources that you can take advantage of:
How To Implement sIFR3 Into Your Website
sIFR Vault – lots of already created sIFR files for your using pleasure
jQuery sIFR plugin
Face lift image replacement (FLIR) is different from the others in that it uses PHP to generate an image that replaces the text. So, as long as you are hosting your website on a Linux box, you should be all set!
- Somewhat easier to set up than sIFR
- EULA is not a problem here either
- Not as quick to set up as typeface or cúfon
- Does not always render a perfect image of the font, depending on which font face you use
- Requires PHP with GD library installed (not a problem for most of us)
Hopefully this post helped you come to a decision on how next you want to start using some snazzy fonts. Personally, I would not use these for anything BUT a header, due to load times and lack of CSS hovers. Correct me if I’m wrong, but I do not believe any of these can be used with a CSS hover. My recommendation would be to use FLIR and Cúfon when available. This was just a cursory glance into these 4 techniques, and I have not actually used any of them more than once or twice, so if I missed something or was incorrect anywhere, please post a comment.