Why using graphical fonts is a bad idea

Firstly, sorry jacque, I'm using you as an example but yours is a typical request and I thought I'd blog it after our discussion on MSN yesterday.

I quite often get requests for a corporate (or particular) font to be used for page/section headings in a website. More often than not, the font in question isn't one of the handful of fonts that can be found on everyones' pc and therefore be specified in the CSS font-family property to style up html text. Usually its from some far out type designer who takes his inspiration from who knows where!

Now, I can fully understand why a site/business owner would want to do something like this. In a conventional marketing sense (for example a printed brochure or press ad), its something you would definitely want to do as it helps build your brand. However its not such a great idea on a web page. The only realistic way to achieve fancy fonts is to create a gif/png/jpeg image containing the desired text, typeset in the correct font. There are however some big problems with this:

Search Engine Optimisation

Search engines cannot read images - even ones that are made up of text! Some of the best keyphrases on a website will be in the page headings and if these keyphrases are locked up in an image, you don't stand a chance of ranking in search engines for them. This can be mitigated to a certain extent by putting alt attributes on your images and repeating the text from the image in the alt attribute - however its debatable as to whether search engines actually give much/any credence to alt text especially compared to something as highly regarded as a <h1> tag.

Maintainability

In an ideal world, the business owner would take responsibility for the content on the web pages via a content management system. Using the graphics as text approach would mean the content creator would need to have Photoshop/Typesetting and web image export skills - this is not likely. OK you could do some server-side trickery to have a gif generated on the fly but in my experience this can be messy to setup and unreliable/error prone.

Accessibility

Images are not the most accessible thing in the world especially when all the images contain are text. Again this can be mitigated by adding duplicate text to the alt attribute of the image tag, but it still wouldn't be as easy as html text for non-conventional browsing software such as screen readers to consume.

Layout

You need to make decisions at the point the graphic is created as to where line breaks occur in your heading. If the site in question uses a liquid layout, the chances are that at some point, one of your fixed width header graphics will break the liquid layout. This is not great.

So whilst it may be visually a 'nice thing' to have your corporate font littered throughout your web pages, the web is about much more than looking pretty.