Custom Fonts on your Site

Lately, I have been itching to use a custom font for my headers.  One of my unwritten rules of powerpoint presentations is to use an interesting font.  Times New Roman and Arial are just saying to your audience, “I didn’t feel like taking 5 minutes to make this interesting on your eyes”.  I had been exploring many options.

sIFR was my first choice.  It’s very popular and they have a beta version.  You know I can’t stay away from beta software.  However, I had a little trouble figuring out how to get the TrueType font turned into a SWF file.  I don’t have flash and don’t really want to use Flash.  Also, the object tag just bothers me in general.

Font Linking and Font Embedding are interesting.  The @font-face CSS tag is reasonable and clear.  The ONLY thing that bugs me is the lack of support.  However, it looks like Firefox 3.1 might introduce support.  Chrome doesn’t support it at all although Safari does. (Boggle?)  Maybe when Firefox 3.1 launches, I will make the switch?

Cufon is what I am using right now.  Notice the top headers are using a Sketch font.  It’s a funny kind of technique.  You build a crazy JavaScript file on their site by feeding it a font.  The JS file is about the size of a font (300k).  Then you use a little javascript file to apply the font to certain css selectors.  The JS then builds CAANVAS tag elements and constructs the fonts on the fly.  It’s pretty fast.  It’s all a little convoluted, but it works.

I think I will move to the Font Embedding when Firefox 3.1 comes out.  Then I could use Calibri for my main font of the text.

Leave a Reply