I get this question a lot: Can you use ______ (a nonstandard font) for my website headers? The question is usually no, because unless a font is installed on everyone's machine, then that font won't be displayed, and a backup default font will be used (usually Arial/Verdana/Times).

Some people don't have a problem with using a standard font, until they see how ugly and jagged it can look at a large size without font-smoothing. Here's an example...

CSS code:

h1 {
        
 font-family:Georgia,Serif;
        
 font-size: 24px;
        
 font-weight: normal;
        
}

Screenshot of font in browser

Notice the difference between the two headers? I would guess that 80% of end users see the first font with jagged edges, because a default Windows setup doesn't have font-smoothing turned on. The average user doesn't know where to turn it on, or even what it does? It's hidden away, under Display Properties, Apperance, Effects. Good luck finding it! I'll give you a hint at what the dialogue box looks like...



So why do some websites have nice looking headers? They insert images into their site instead of headers. There are a number of reasons this is bad (Google is blind, remember?), but from my side that means I've got to create a lot of images. It gets repetitive, but is necessary to retain a site's brand and look. Not anymore...

Why SIFR matters

Jeff Croft says it best:

Put very simply, the technique uses DOM scripting to dynamicly replace standard (x)html text with small Flash movies embedded with your favorite font. The result is your text, beautifully rendered in your typeface of choice via the ubiqutious Flash format. The real brilliance, though, is that the source code of the page remains as plain and true as the light of day — meaning that your fancy header is actually just a plain ol’ h1 tag. This, of course, means it’s full accessible to screen readers, users who don’t have Flash installed (do they still exist?), and of course, Google.

Instead of creating three hundred small images, I could have created one Flash file. Simple. Brilliant. Easy. Accessible. Fast. What more could we ask for?

That about sums it up! I'll be applying this technique to my sites as I go along, but from my sites that use them (UrbanDude.com and LittleFluffyCloud.com, I haven't heard any complaints, only compliments.