You’ve probably noticed the new header on this site. And depending on what web browser you use, you might have noticed some other changes.
With the release of Firefox 3.5, I decided to look into using embedded fonts. In the past, web designers have mostly been limited to the fonts pre-installed on most people’s computers, or creating an image. That’s fine for something where the text never changes, like a banner…but not so great for body text or headlines. There have been methods to work around it, but I always thought that using Flash animations for headlines was kind of overkill.
So I tried out some fonts, and along the way made some other adjustments to the site. Comment boxes should no longer push into the sidebar on multi-level replies, for instance. I added drop-shadows to headings on browsers that support it, and adjusted the main font size a bit for readability.
Embedded fonts are currently supported in Safari, Firefox 3.5 and Opera 10 beta. There is a way to embed fonts on Internet Explorer, but it uses another type of font file and the converter tools are a pain to use. It took me at least an hour and a half to figure out what I had to do. Then the result looked terrible, so I pulled it out.
Here’s a recent headline on Firefox 3.5 on Linux, showing font smoothing and text shadow.
And here’s the same headline on Internet Explorer 8 on Windows.
No text-shadow (since IE still doesn’t support it), and for some reason the embedded font has no smoothing, making it look horribly jagged. Either that or the two levels of conversion messed it up. After seeing this I decided to just drop the IE-specific code. The headline looks just fine in Georgia.
The fonts I’m using are: Diavlo from exljbris for post titles, and SF Fedora from 1001 Free Fonts for the sidebar headings and banner. Diavlo’s license explicitly allows web embedding. With SF Fedora, I’m not 100% certain. Added to the fact that it doesn’t quite look right on Windows at this size (it looks just fine on Mac and Linux), I’m contemplating dropping that one.
Looks awesome on…
- Firefox 3.5 Mac/Linux
- Safari 4 Mac
- Opera 10 beta Linux
Looks good on…
- Firefox 3.5 & Safari on Windows with Cleartype (but letters on sidebar aren’t aligned quite right)
- Opera 10 beta on Mac (headline font too thick, sidebar font not used)
- Opera 10 beta on Windows w/ Cleartype (sidebar font too thick)
- Any Windows w/standard font smoothing or none. (horrible jaggies)
Does not apply to…
- Internet Explorer
- Firefox 3.0 & older
- Opera 9 & older