A Guide to Dynamic Font Replacement Techniques on the Web

Typography and font selection are critical to the look and feel of every website. Ever since the dawn of the web, designers have been restricted to a limited number of fonts. These fonts are known as "web-safe", meaning that they are likely to be present across most operating systems. If the user does not have one of these fonts installed (a rare occurrence), designers can list several fallback options consisting of similar fonts. As a result of the limited options readily available, images of text have been used for headline elements and website navigation menus for years. However, using static techniques such as this is no longer considered good practice.

As HTML5 and CSS3 invade the web more and more, many exciting font replacement techniques have arisen. Several of these techniques combine the power of jQuery and JavaScript to essentially "rewrite" a selected element with rendered images. Other techniques embed fonts into the webpage on the fly, allowing type to remain selectable and accessible. Google has even thrown its hat into the ring by offering an online web font service that provides "hundreds of free, open-source fonts optimized for the web." In the past, even Flash was used as a means of displaying a richer variety of fonts on the web. There are advantages and disadvantages to each technique, however one thing is certain: more and more fonts are appearing on the web every day.

Cufón is a popular image replacement technique that relies on JavaScript, VML (vector markup language) and HTML5 to replace selected elements on the fly with transparent PNG images. A designer can literally use any font they have available on their system with this technique, as a font file needs to be generated for Cufón to use. While the fonts remain very consistent across all browsers and are rendered in great quality, users on slower systems or with a slow internet connection may at first see the replaced element before Cufón works its magic. This results in a "flicker" when Cufón eventually kicks in and replaces the element. Also, the fonts are no longer selectable as they have been converted to images. Due to these performance issues, we have recently ditched this method here at Adworkshop.

Google's Font API service is a completely open source system, meaning the fonts are free to use by anyone. However, the fonts are served up by Google, which means that if Google is having a bad day you may experience slow loading times with your fonts. From what we have dabbled in with this service, there is still a very limited selection of fonts to choose from and each browser seems to render them all differently. Text appears very aliased in some browsers, and Chrome itself does not seem to display them very well. However, this service is a work in progress and should get better with time. Until then, you can select fonts with names such as "Annie Use Your Telescope" and "Swanky and Moo Moo" from this service.

The most popular technique and our current choice at this time is Font Squirrel. This technique relies on @font-face, which uses nothing other than CSS to embed a selected font file (TrueType, EOT, WOFF, SVG, etc.) depending on what best suits the user's browser. Different browsers render elements in different ways, some better than others. The text remains completely selectable. It's as if you are temporarily installing the desired font on the user's system. Similar to Google's Font API, the fonts are rendered in varying qualities depending on the browser and even the operating system. Fonts look rock solid on Apple computers (big surprise), even at small sizes. On PC's, fonts tend to look poor below 16 pixels or so, and are best used to represent headlines and other large elements. It is a lightweight solution for the most part, and very easy to implement, as the Font Squirrel website will generate everything you need including the various font formats in just a few seconds. You have complete control over font assignment in the CSS, with no need to include JavaScript replacements or additional rendering engine files.

I've only highlighted three techniques in this post, all of which are offered as modules for easier drupal development and implementation. The only way to truly understand the benefits and drawbacks of each technique and make an educated decision on which to go with is to get out there and try each one yourself. Using methods that replace text with images or Flash decreases search indexing and interferes with site crawlers, so methods that allow text to remain searchable and selectable are best. It is an exciting time to be working with the web, as HTML5, CSS3 and the wide acceptance of jQuery allow us to offer up more beautiful, sophisticated, and clean websites than ever before. Don't settle for boring; use one of these techniques or one of the many other solutions to continue to beautify the web!