How To: Font Replacement
Typography in web design is an important aspect, having aesthetic fonts can be appealing and increase user experience. Over the past few years people have been using various methods of font replacement such as image replacement (with or without sprites), or by using PHP or even javascript.
With CSS3 now up and running we now have @font-face to work with as you can see here: CSS3 Info, but the problem with @font-face is licenses for the fonts you use, there are many fonts you will not be able to upload.
There are a few solutions to font replacement which I will run through below, you can obviously follow the links and read in greater detail on the author site.
Cufon allows quick text replacement with canvas and VML, with no flash or replacement images needed, the downside again is the license terms on any fonts you use.
Open source solution which uses flash, CSS and javascript to render plain browser text. As with Cufon, font license terms can hinder your usage of sIFR.
This is an image replacement script that automatically inserts replacement images into your page via javascript, any text element can be replaced.
Javascript solution that works within HTML and CSS, fonts work as if the user had them installed locally, again fonts license terms can be an issue.
Other Options?
Another path that seems to have real potential is web based services that have agreements with font foundries and enable you to use a huge array of fonts without breaking any laws.
This is a subscription based service that links to a large number of open type fonts (free and commercial) that are hosted on external servers. Please note there is a fee to use Typekit.
And finally Clearleft are working on a project called Fontdeck which promises to deliver real fonts to your website, I’m not exactly sure of how they are going to do it, but they could very well offer and real competitor to Typekit.
