Blog

Fonts & Why CSS3 is a Good Thing

I think perhaps I've taken on slightly too much work since my last post, and I'll certainly learn from my mistakes, but the hectic work schedule has just been increased by problems with the projects.

Until now, I've been aware of the problems fonts could cause on the Web, but in a vague sort of way, thinking myself out of harms reach as long as I ignore the issue with enough vehemence. Unfortunately, I hadn't been ignoring it fervently enough, and it managed to rear it's ugly head with one of the latest projects I've been working on, where the font was crucial to the brand of the site. Now, normally, I'd jump straight into some GD routines, and create the graphics I needed as they were entered through the CMS, but it was not so simple an issue this turn of the wheel. You see, I didn't actually have the font in question, and the only font available was one which was incompatible with the GD library. So, being a fan of open source, I installed and fired up FontForge thinking I could easily convert the font and settle into my normal routine. I was not prepared however, when FontForge completely refused to read the font, instead offering a collection of empty glyphs. Determined not to be beaten, I attempted to tweak a font from the same family (one which I did have on my system) and use that, but being no font-editing expert, my efforts were largely futile.

Many annoying work-hours later, I convinced the client that the font would have to be purchased again in a format that I could use. That done, I set about using it, only to realise that on their existing site, the font had been reduced in width even further than that of the condensed version. At this point, I was nearly ready to pull out my hair and cry, but not one to be easily beaten, I tried faking the effect using just GD, by creating the graphic, and then resizing it horizontally afterwards. This worked for a while, but then I hit upon the most peculiar problem I've ever seen with GD; the letter 'Z' was not rendering at all! Thinking perhaps I'd made a mistake, I tried using other fonts from the family, all of which exhibited the exact same behaviour.

Now in danger of making myself bald through a very painful method, I sought another way to create the graphics, a path which led me to sIFR. I'd never used this before, but I'd seen it used, and spoke to those who had used it, so I felt fairly confident that I could get it working. Things did start getting better here, as I had a rudimentary example up in minutes, albeit with some issues. The problem I now had was that different browsers were giving different results. Not having had any experience with this before I set about hacking the whole thing, in order to bring it kicking and screaming to where I wanted. I've since found that there are better ways to control it via the CSS files that some with sIFR, and I now also know of another area in which IE refuses to play ball; letter-spacing. For some reason I had to set a letter spacing that was more than 8× smaller than that I used for Firefox. Needless to say, I think I've just about cracked it, but I'm not quite ready to consider it wholly beaten just yet.

So, I can't wait now until browsers start implementing CSS3, or more specifically, the extra font functionality which it comes with, as that truly will be a boon for all web developers.