How to handle fonts in iTunes LPs

If you want to make your iTunes LP look a bit better than a simple drab HTML website you'll want to pull out all the stops to build an interactive experience. This is done using good imagery, animations, and design. An oft neglected aspect of design is fonts. This has traditionally been because web-developers have had to use the same standard fonts, because browser-builders couldn't agree upon a usable standard for web-fonts.

Now however finally browsers are starting to support custom fonts. Safari, Opera, Internet Explorer and Firefox all support some kind of web-fonts. And since iTunes' LP viewer is essentialy a Safari webbrowser we can use these custom fonts to finally make great designs right?

Unfortunately WRONG; There are two big problems with font-support.

Windows Cleartype

When Safari was released it used the wonderful font-rendering engine used in OS X to render text. All text was nice and crisp and smooth. However Windows users aren't used to smooth, and many preferred to have all apps to have the same font-rendering, which unfortunately then had to be Windows' font-rendering. So Safari at the request of those users switched to the Windows font-rendering by default.

There is however a big bug in web-font rendering in Windows which due to this choice is also present in iTunes when using custom fonts for iTunes LPs. When cleartype is disabled all fonts are displayed without anti-aliasing, meaning jagged fonts. However web-fonts are always anti-aliased. This is a bit strange, but workable from a designer perspective. The problems start however when cleartype is enabled. And since this is enabled by default on Windows 7 and by users on many other versions it is a problem which should not be ignored. When cleartype is enabled everything is anti-aliased, however those web-fonts were already anti-aliased, and cleartype applies some kind of anti-aliasing filter on the already anti-aliased text, causing weird artifacts and jagged edges.

AppleTV

Possibly an even worse problem is the AppleTV, since I haven't been able to get web-fonts to work on the AppleTV at all.

So how does Apple do it

Well, in the official Apple created iTunes LPs, all texts are displayed using images. The big advantage is that you can guarantee exactly how the page and the font-rendering will look. The obvious disadvantage is that whenever any text changes you have to create new images, which can be a pain.

A compromise: Cufon

Traditionally there have been several ways to get custom fonts in HTML pages: server-side generated images, Flash text using sIFR, or Cufon. Since an iTunes LP is a self contained application and cannot use server-side dependencies, and cannot use Flash or other plugins the first two options disappear. So that leaves us with Cufon.

Cufon is a Javascript font-rendering engine that uses the HTML5 canvas tag. This completely by-passes the browser's default rendering, which is a bit of a hack, but solves all of our problems while retaining the easy editability of normal HTML.

Using Cufon

To get started you first have to convert a font to a special Cufon file-format. This can be done quite easily using the online generator. Just upload a font and download the resulting .js file. This should normally be something like MyFont_400.font.js.

Also download the cufon-yui.js file from using the download button and place them in a scripts folder in your iTunes LP.

Then add the following code to your HTML in the HEAD tag:

<script src="scripts/cufon-yui.js" type="text/javascript"></script>
<script src="scripts/MyFont_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace(['h1','h2']);
</script>

Using this code, every instance of an H1 or H2 tag in your document will have its font replaced by the font MyFont that you created using the Cufon generator. You can only select locations for replacement based on tag-name by default, eg. all H1 tags or all P tags. But you can extend this functionality by including jQuery which allows you to things like:

<script type="text/javascript">
	Cufon.replace(['div#title']);
</script>

Which will replace the DIV with the id title with the custom font. Checkout Cufon's documentation for more information on how to use Cufon and for examples.

And there you have it... custom fonts with easy maintainability, compatible with Mac, Windows and AppleTV.