@font-face

Posted on

I’ve recently been playing around with yet another new theme for tom.net.nz. Said theme will be extremely minimal, with no graphics, and only uses colour, layout and typography to be attractive and readable. As part of exploring the typography, I’ve been experimenting with ways to get custom fonts into all parts of the design.

Of course, I’m well familiar with dynamic text-replacement options. However, these are typically only suitable for titles, and not large amounts of body text, as rendering large swathes of text quickly becomes expensive. And so I started exploring @font-face. This is a relatively new CSS technique that involves linking to an actual font file on the internet somewhere, and letting the browser handle rendering of text into that font family. A few things I’ve learnt through this exploration:

  • The particular font I chose to use (OpenType format) did not render at all in IE8 or Chrome3. This page details support for @font-face. It should be enabled by default in Chrome soon, but I will need to create custom CSS and a custom font file for IE8 if I wish to get it to render. Due to lack of support from IE and Chrome, only about 60% of people visiting my pages would actually be able to see the custom body font if I was to switch it on tomorrow.
  • Rendering is entirely up to the browser. This means that text (as usual) looks completely different in Firefox and Safari. (Click the browser names for a screenshot snippet.) This is related to the way that the two browsers handle subpixel rendering, and it’s debatable which is “better”. The point is, they are quite different. Although of course using standard fonts they would still be different.
  • One caveat of the browser needing to download the font, is that there can be a flicker on page load between the page loading, and the font being downloaded, and the page being subsequently re-rendered. This of course is not experienced on the average website, where built-in fonts are used. This effect can create a detrimental browsing experience. Note that once the font has been downloaded the first time, it is typically cached, and subsequent page loads do not suffer this flicker.
  • While TrueType fonts are supported by both Firefox and Safari, I found that using one did not make for a nice result. In fact, using a TrueType font made for extremely poor subpixel rendering, and the results from both Firefox and Safari are indiscernable. I did not have a chance to test in another operating system, but I believe that both browsers may be falling back to the Windows subsystem to render these TrueType fonts, due to the negligible differences in rendering.

As a side note, I elected to use Cufon for text-replacement in titles and headings. If all goes well, I may be deploying this new theme in a week or two!