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.

I have recently had the task of developing a drag and drop widget style application. To make things more exciting the designers managed to include all three CSS nasties in one widget.

1. Gradiented background (on both the widget and main screen)
2. Rounded corners on the Widget
3. Drop shadow on the Left and Bottom edges

The widgets are also fully resizeable, so no fixed size images. After a bit of searching around I didn't find any particularly good solutions, and I also wanted to steer away from using any superfluous JavaScript. The solution I came up with uses only CSS and four images, its standards compliant and works across all the browsers (with slight degradation on IE6)

Below is an image of what we are trying to acheive

I have created a zip file which contains a working demo of the CSS, and can be downloaded here

Node editing in Font Creator

Finally i've beaten the odds and actually managed to write another blog entry. Initially I was going to write a two part entry, the first on how to create your own font type, and the second on how to use SIFr to use your new font on the web.

However after a bit of research it turns out that creating your own font is actually pretty straightforward.Despite the remedial sounding name http://www.myfirstfont.com/ actually covers the subject pretty well. Then on the subject of SIFr I remember hearing about a few alternatives that use slightly different technologies. So instead I am going to give a few tips on font creation and then in part 2 compare SIFr with some of its alternatives to see which best suits my needs.

If you just want the font you can download it here