There are just sometimes when you want to use a nice font on your website. Unfortunately, there is no easy way embed custom fonts using HTML/CSS. That generally means you’re stuck using ‘core’ fonts like Arial, Times, Verdana, Georgia, etc.
You could use images, or Flash movies, but both are labor intensive and break accessibility. With images you also lose the ability to select and copy the text. That means images and Flash are best reserved for text that won’t be changing, like the title of a website.
For Media Grease, I wanted to use Gotham, the font I’m using in the logotype, for headlines of posts. Instead of wasting my time creating images for each headline, I’m using Sifr. Once sIFR is setup on your website, it automatically replaces text areas you choose with lightweight flash movies that display a custom font. It degrades gracefully for people without Flash or Javascript and doesn’t hurt accessibility and preserves the ability for people to select and copy your text. Sifr is pretty much the best option we have at this point.
If you want to install Sifr on your website, you can read this great tutorial at Design Intellection.
If you’re a Jquery fan – like me – you can take advantage of a Jquery plugin that makes Sifr deployment a snap.
Post title without Sifr:
Post title with Sifr:
Also, with the Jquery plugin, here’s all the Javascript I needed to Sifr’ize my titles:
$('h2.entry-title').sifr({path: themepath + 'scripts/', font: 'gotham'});
The other cool thing is that Sifr takes the color, size, margins, etc. from your CSS and applies it to the Sifr’ized text. You can override that those settings in the Javascript, but I’m not sure when that’d be necessary.