Selectable font image replacement

Tuesday, 10 November 2009

This tutorial provides a technique on how to implement cross-browser selectable font image replacement.

You can download the files for this example here. Note: the files do not contain the fonts. You can follow the links at the bottom of this post to obtain free fonts. You can view a demo of the functionality here.

After so many years of being stuck with a small number of web fonts it's a shame that there isn't a standards compliant solution to the problem. What do we want? An accessible (as in users don't need to have anything installed and turn everything off and the page is still readable), fast, usable (text should be selectable, single, double and triple click should work as expected as well as copy/paste) and minimal (easy set up, limited number of DOM elements) solution to the font issue.

Designers want to use any font available, developers want to be able to implement it without doing extensive hacks and tricks and users want to enjoy the beauty while having the styled text function as standard text.

Currently there are several ways to go about trying to achieve the above, but I would argue that none of them meets the criteria above. They either rely on flash, don't work across all browsers, the text isn't selectable in most solutions or they require a hell of a load of mark up. The main issue is the lack of a standard that is already implemented across all of the major browsers. We want a solution that will work in 90 plus percent of all of the browsers currently in use.

This solution requires a limited amount of mark up, works in all of the current major browsers (IE6/7/8, Chrome, Firefox, Safari 4 Mac and Safari 4 Windows), works in text browsers (tested in WebbIE3) and can be used with any TTF and OTF fonts. This works in an unobtrusive way to allow users to select and copy text and single, double and triple click functionality works in all browsers.

My solution is really a collection of parts of other peoples solutions glued together with jQuery. I would like to take credit for it and give it a fancy name, but I think the solution has been around for a while in parts, but not put together in a clever way. At the end of this tutorial I will give links to some of the sources who deserve credit for their work.

The answer is in three parts: php and GD is used to render the custom font, a little bit of CSS hackiness is used to provide the text selection and jQuery is the glue which holds it all together by determining the text and font to be displayed and doing a little bit of browser checking to see if opacity is supported to get IE to work.

So how is it done? We start with an element, say a h2 and add a pair of span tags inside with some text as follows. Each of these pairs of elements will have a special class for later styling; I have called mine font_substitue and inner.

<h2 class='font_substitute'>
<span class='inner'>This is my fancy text</span></h2>

Furthermore you can provide a second class to the h2 to determine which font to display, e.g. Anidka

<h2 class='andika font_substitute'>
<span class='inner'>This is my fancy text</span></h2>

Using jQuery we loop over each of the $("h2 .andika") classes and then retrieve the text from the span. Using the combination of the selector and the text we use jQuery to insert a background image on the h2 element by setting the src of the image to point to our php script. The php script serves a png image with our rendered font. CSS is used to hide our text and provide a solution to the selection problem. This is done using filters in IE and ::selection rules for Opera, Firefox and Chrome. The last bit and the most tricky is getting the line-height, font size, wrapping and word-spacing to line up. This can take some playing around but a seasoned CSS expert shouldn't have too much difficulty in getting it done.

I'm not going to go in to great deal on how the php font rendering is done, this solution has been around for several years now and the full article on how to do this can be read here. My php script also allows custom tracking (like kerning), word wrapping and custom line height. Also be warned that GD appears to render the images slightly differently (spacing, line height etc.) depending on which version you are using so you will need to do a bit of tweeking. I also took TJ Atkins great color matching function.

This solution provides us with an accessible, fast, usable and minimal solution that works in all current browsers without the need for the user to install anything extra, designers can have their fonts and developers only need to add a minimal amount of code to get it working.

Stewart Rosenbergers - Dynamic Text Replacement
TJ Atkins - php Image Replacement
ultraniblet at gmail dot com - tracking
One of many sources for free (as in please read the license first) fonts - sources for fonts
jQuery - jQuery

Fonts for example:
Marketing Script
Sax Mono
blog comments powered by Disqus