Following on from where I created my own font, I am now going to look at the best way of using this font on my website. In web design we are quite limited by the fonts that we use. To ensure a consistent design across all computers we have to rely upon a few select fonts that most operating systems (e.g. windows) have installed by default. One alternative is to create an image of the text in editing software (i.e. Photoshop, Gimp), this is however very time consuming. For example if you wanted a fancy title for each blog entry you would manually have to create an image each time you created a blog entry.

So a few nice people have created clever solutions which will allow us to use custom fonts on dynamically created text (this saves us from having to create an image each time). I am going to do a bit of comparison on 3 of these tools to find out which is best for my needs. Primarily I am going to be looking at download size, ease of use, performance, cross browser ability and overall quality.

My simple tests can't be considered an ultimate comparison, it's merely how I got on trying to set up the three alternatives for the simple usage that I require. For that reason I am using the services as they come, and leaving the settings as default. Unless of course they don't work at all, in which case I will do what I can. I generally use Firefox for developing, but will attempt some cross browser testing.

sIFR2.0

sIFR is probably the most established of the text replacement services. "sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash."

I currently don't do much in the way of Flash, to the extent that I don't have it installed on my computer. So unfortunately to get sIFR up and running I had to install the trial version. This in itself takes a while to setup as the download weighs in at nearly 1GB. If you are a regular Flash user this shouldn't of course pose a problem.

Setting up the SWF is fairly straight forward, I wasn't one hundred percent confident in what I was doing so just stuck to the instructions. The documentation is a little bit fragmented and I had to jump around a few sites to gather all of the information I needed. The lack of a decent centralised homepage was a bit frustrating. However I eventually gathered together the JavaScript that I need to run. The code involved is a little more in-depth than I would like, but it does provide you with a huge rack of options.

 if(typeof sIFR == "function")
  {
    sIFR.bHideBrowserText = true;
    sIFR.setup();

    sIFR.replaceElement("#sIFR", named(
    {
      sFlashSrc: "/files/text/sifr/comic_andy.swf",
      sColor: "#000",
      sCase: "lower",
      nPaddingLeft: 20
  }));
}

From what I understand JavaScript is used to replace the original text with a Flash Animation. The animation will take the size of original text element. So applying CSS to increase the size of the original text in turn increases the size of the text in the animation

You can make quite a few alterations to the final display through the SWF, JavaScript and CSS file. This is good but it obviously requires a bit more in-depth reading, the default configuration however displays fine for the purpose of this test. As you can see the final result is pretty clean. There is a slight error in the leading edge of the first character but I think this could be tidied up with some tweaks to the settings.

The quick brown fox
jumps over the lazy dog

sIFR text replacement

sIFR proved to be really consistent across the browsers that I tested, displaying almost identically in each one

Cufón

In their own words 'Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use'. Having spent quite a while getting SIFR up and running these words were music to my ears.

Setting up Cufón was really easy, first up we use their online service to create a comic_andy.font.js file. This is pretty instantaneous, by the looks of it is a JavaScript file which contains all of the node reference points for the particular font.

Next we include the font.js and cufon-yui.js (pre-compressed using YUI) files. We need to include a simple bit of JavaScript which tells Cufón which fonts to replace. Fortunately Cufón detects whether you are using a javaScript library and hooks into those selectors. So for me using Jquery I just need it to run the following bit of JavaScript, which tells it to replace any font with a class of 'cufon'

Cufon.replace('.cufon');

Et Voila! It works, I was surprised how simple this was. The final text is created using the 'canvas' element and so this will work in any browser that supports canvas. You can also apply some additional CSS styles to the font, so in my case I tweaked the line-height to make it display a little nicer. Other than that my sample below uses all of the default settings

Cufón has a range of options, including support for using multiple font families and adoption of quite a few css properties. The text is also selectable but this is done blindly.

The quick brown fox
jumps over the lazy dog

Cufón text replacement

I had slight concerns about the cross browser compatibility with using canvas and JavaScript for text replacement. Flash has the advantage that if the user has it, the animation will be almost identical in any browser. However Cufón surprised me and worked brilliantly in all the browsers that I tested, without any adjustment needed.

Typeface.js

Instead of creating images or using flash just to show your site's graphic text in the font you want, you can use Typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally. This is a work in progress, but functional enough at least to render the the graphic text on this site. It may not be fair to compare work in progress with the slightly more established Cufón and sIFR, but I'm going to take a look anyway.

Similar to Cufón you need to submit your font and have Typeface.js create a special file for use with your script. At first I didn't realise this and ended up downloading the Perl module which allows you to setup the service yourself. This seems like a pretty nice idea but not really necessary for my usage, luckily I found the online utility on the fonts page of their site. Unfortunately my font did not appear to have the correct rights to embed the font, which seemed a little strange seeing as I created it myself.

I spent quite a while looking around on FontCreator for some settings to tweak but to no avail. After searching the Typeface.js forum I found a link to this site, which hosts an .exe file that alters the embed rights on a font. Its always a little scary downloading and unsigned .exe file but it did the trick. The online utility now works fine and I have my own Typeface.js file (comic_andy_regular.typeface.js.htm).

After these initial hurdles Typeface.js became quite easy to set up. One minor criticism is that the main Typeface.js JavaScript file did not come compressed, if you are concerned about performance you can of course do this yourself. Typeface.js is similar to Cufón in that it uses canvas and JavaScript to create the text, there are however subtle differences in the implementation. Typeface.js does not require any additional JavaScript code to trigger the text replacement, you do however have to give each element the class 'typeface-js' , it will then be run automatically. The rest is controlled by the CSS, simply include a 'font family' attribute for the special font, in my case.font-family: "comic andy"; Using this method the support for multiple embedded fonts is very simple. As with Cufón the text is also selectable but, blindly.

The quick brown fox
jumps over the lazy dog

Typeface.js text replacement

Typeface.js has a few issues with IE8 and throws up an error, this is apparently due to lack of canvas or vml support. The only workaround I could find for this was to get IE8 to emulate IE7 using the following META tag

I also encountered a few issues with the CSS settings that I applied, causing the text to look quite different in Safari than Firefox. I have overcome these by setting the font size in pixels, rather than the preferred em. In Firefox their appears to be a slight problem with the kerning at the beginning of my characters. (Hence the flat edges at the beginning of each word) I had a quick go at trying to fix this, but with no luck.

Conclusion

sIFR came out as the most lightweight solution, the client side downloads coming to only 19kb, half that of Cufón which came in second place at 41kb.

Cufón proved to be by far the easiest for me to set up, and didn't require any tweaking from the default settings. Typeface has the potential to be even easier as it does not require any additional JavaScript, I was affected by the font embedding issues however this may work straight away for some fonts. sIFR proved to be a bit of a pain to set up, mainly because I had to install Flash, and there were quite a few settings to read through

Documentation is often over looked, after all no-one reads the manual right?. Wrong RTFM, it makes life a whole lot easier. Cufón which has a very web 2.0 influence is well documented and cleanly presented, refreshing compared to the fragmented sIFR documentation

The cross browser comparison was pretty much a tie between Cufón and sIFR, with both looking quite similar in all the browsers I tested. Eventually I gave the advantage to Cufón merely because you don't need a Flash plugin to run it.

I didn't delve too much into the fine tuning of each solution as it would take a very long time. Needless to say all of the solutions have more advanced options, one of the most important being the ability to stop the loading flicker. I will personally be interested when someone offers the ability to rotate the text, as I quite like having my hand drawn fonts on a slight slant.

I have decided not to rate the different solutions on performance, I think I will leave that to someone else. The code is quite heavily compressed and so trying to understand which (Firebug) Profile attributes can be attributed to which solution is rather tricky. I would be very interested to see the results on a proper benchmarked performance test, maybe something similar to slickspeed.

The below table summarises the results, where in my opinion 1 is the best and 3 the least best (worse).

	sIFR 2.0	Cufón	Typeface.js
Client download size	1 19kb	2 41kb	3 60kb
Ease of Use	3 Setting up flash	1	2 Font embed issues
Documentation	2	1	3
Browser Support	2	1	3 IE issues
Quality	2	1	3 Kerning issues
Performance	Out of scope

And the winner is*.... Cufón

It was a close run thing between sIFR and Cufón, with Typeface.js being another promising newbie, but for me Cufón came out on top. I have to confess to being quite pro-JavaScript, and my decision may be slightly biased, but for this demonstration it proved to be the easiest by far. * In my humble opinion.