@font-face-lift

I always found that customizing the look of one's website is greatly constrained by the inability to customize the typeface. Traditionally browsers use pre-installed fonts and with the CSS font-family property, you can provide a list of typefaces that you would like your text to be rendered with (Trebuchet MS, Verdana, Sans-Serif, monospace, for instance). But this list is merely a suggestion. You don't have complete control over how your web page is going to look like in X browser on Y platform.

On last friday however I found that it is about to change now (at least in my hopes). I stumbled upon a blog post which had its text rendered in a very beautiful font. After some digging through its source, I discovered the @font-face CSS property.

It's not that this is some brand new thing in latest CSS spec, but it seems to have become of practical use only in latest browsers. You can learn more about how to use it in this post. I am going to talk about my experience with it and how it is still not perfect.

If you are reading this post in an RSS reader, go on and open it up on my blog at this point. You will see it rendered in a beautiful font. But not all of you may be. What it should ideally look like is:

But is that what you see?

The snapshot above is of Safari 4.0.4 on Mac OS X. I believe it looks the same on latest Chrome versions of Linux and Mac OS X. It looks similar in Chrome on Windows XP, but on my eeepc it looks very light for some reason. It won't look anything like it at all in Firefox on any OS. That really disappointed me, but the fault here is not of Firefox, but of my blogging site blogger.com.

After a lot of debugging of why Firefox wasn't loading @font-face, I found that Firefox does not allow a webpage to load fonts that are served on a different domain. Blogger does not allow the user to host any arbitrary file, so I host my font files on www.altcanvas.com. That offends Firefox and instead of loading the custom fonts (Junction, Santana), it falls back to Trebuchet MS. You can find more details about Firefox's policy on this matter in this article.

I spent whole friday doing fun-font research for my blog. But it stoked me enough that I started redesigning www.altcanvas.com too, which desperately needed a facelift anyway.

So over the weekend with the help of two new fonts (Junction and Comfortaa) and my recently learnt CSS tricks, I redesigned my website. Check out the new look of http://www.altcanvas.com

Again the ideal look is like this:

Don't know what you will get to see. But this time, Firefox's rendering will look  just like what you see above. That's because the fonts are now hosted under the same domain that is serving the web-pages.

What I also found was, even if all modern browsers successfully show custom fonts defined with @font-face, their rendering differs. For instance, the Junction font is only available in Regular font-weight and no bold variant is available. So the bold text doesn't look any different from normal text when viewed in webkit browsers (Chrome, Safari), but Firefox (and I believe IE too) smartly creates a bold variant of the typeface. Also I guess, the final look is affected by the OS platform, screen resolution, Anti-Aliasing settings, etc. (The 'e's look poor for Junction font in IE.)

So in conclusion, we have a new powerful tool. It's not perfect, but it's pretty good.

If you want to customize typeface of your own website or blog, I highly recommend fontsquirrel's free @font-face kits.

Ads:
* CSS: The Missing Manual
* Head First HTML with CSS & XHTML
* Fonts & Encodings