Dynamic Image Replacement: Practical Techniques and Tools
Note: This post was first published on the 11th Sep, 2009.
When it comes to web design, creativity of design should not be hold back by the limited choices of supported web fonts we call the web-safe fonts. Designers should be free to use any fonts they prefer on titles and content.
In 2005, dynamic image replacement was made popular with a technique called Scalable Inman Flash Replacement (sIFR). Developed by Shaun Inman, sIFR take advantage of Javascript and Adobe Flash to allow web designers to use any custom fonts they like on the website and still maintain visibility to those who don’t have that font. And as the web continues to evolve, today we have more alternative solutions using various technologies, just in case you are not quite a fan of Flash.
Without further ado, let’s take a look at some of the techniques to achieve Dynamic Image Replacements.
Commonly Used Techniques
Here are some of the most commonly practiced techniques for dynamic image replacements.
Scalable Inman Flash Replacement (sIFR)
sIFR is one of the most popular method to embed custom fonts on websites. It uses Javascript and Flash to generate a custom typeface for your website and allows the converted typeface to be selectable. Aside from that, converted typeface remains as text in source codes so search engines can still crawl them.
sIFR 2 (recommended) is the current stable release, however if you are looking into implementing sIFR, you should also know that siFR 3 beta is also available for download. It might be a little buggy but at least it solves the font-expansion problem of sIFR 2.
Tools for sIFR that might come in handy:
- sIFRvault
sIFRvault is a repository of sIFR fonts you can download.
- sIFR Generator Online tool that allows you to create sIFR .swf files with a few clicks of your mouse. Simply upload the TTF font of the font you want to convert, preview and download.
sIFR Lite
The original sIFR is 22k, so Dave decided to rework it using a more object-oriented approach, and the result? 3x smaller at 3.7k.
PHP + CSS Dynamic Text Replacement (P+C DTR)
As the name suggest, this is a text replacement method that uses PHP and CSS that make use of the original method described by Steward Rosenberger. It is also an enhancement from the previous version developed by R. Marie Cox that doesn’t support text wrapping and inner tags. Another cool thing about P+C DTR is, the image text can be customizable with CSS tags.
typeface.js
What makes typeface.js special is that they only use Javascript to embed custom fonts, and the style can be further customized with HTML and CSS; no Flash is required. It is open source and supports most browsers we are using these days, whether it’s Safari, Firefox, IE (6 and above).
Personally, after some experiments with typeface.js, we think there could be some potential room for improvements. Firstly, the fonts tend to render slightly different among different browsers. If you are using typeface.js, we suggest you do a cross-browser check before assuming what you see in Firefox will be what you see in Safari. Text are also not selectable with typeface.js.
Custom fonts in typeface.js are not compiled; meaning users are able to download the fonts. That could lead to copyright problems. It’s advised that you check thoroughly to make sure the fonts you are using are ok for redistribution.
Cufon
No Flash required, Cufon is a great alternative to sIFR and it’s quite simple to implement. First, you use the Cufon generator to generate and customize the font you want, then you insert the Cufon Javascript in your source code and you tell the script which selectors you want the fonts to be customized.
The biggest problem with Cufon would be the legal issue of using these custom fonts online. Since it’s embedded within Javascript, it can be easily ripped by anyone who view the source code. Cufon custom fonts are not selectable; that’s the other turn-off.
Facelift
Also known as Facelift Image Replacement (FLIR), it is another great method to sIFR that do no required Flash. Looks like very other alternative is hitting in sIFR’s Flash issue.
Facelift uses PHP and PHP’s GD Library. They inherit the legacy problem of custom font replacements – unable to select the text. Aside from that, we think it’s great too.
More Methods
The techniques above might be more widely used, but we’ve noticed some other ways too to give convert your text into beautiful custom typefaces.
Type Select
TypeSelect leverages on typeface.js, jQuery, the canvas, toDataURL, CSS background properties and real overlayed text to give a custom typeface on your website. Text selection works on Firefox, Safari and even Chrome but not IE.
Swf Image Replacement (swfIR)
swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. For example, you can add any images on your website and swfIR will add a rounder border, rotate the positioning or even add shadows to it.
Nine Techniques for CSS Image Replacement
These are not dynamic text replacements, but Chris Coyier demonstrates as many as nine different CSS techniques to replace text with images; each with a report card listing the condition of – what if images are on/off, CSS is on/off.
Font Burner
Font Burner leverage on Scalable Inman Flash Replacement (sIFR) to change your titles into custom font. All you need to do is find the font, select it and insert the code into the head and your title will be changed in no time.
WordPress + Dynamic Image Replacement
If you are a WordPress user looking for a dynamic image replacement solution for the title or even the content of your blog, chances are there is a plugin for them. Here are some text replacement plugins we have come to know about.
sIFR WordPress Plugin – WP sIFR
WP sIFR was created to remove the complications from getting custom fonts on a WordPress site. With WP sIFR, you only have to upload your SWF font file to the plugin directory and then login, activate it, and configure its styles all in the Settings panel.
Cufon WordPress Plugin – WP-Cufon
The only thing you have to do is converting your fontfiles and upload them into the plugins directory. You can enable the objects you want to get replaced in the Admin Menu of WordPress.
Facelift Image Replacement (FLIR) WordPress Plugin
FLIR for WordPress is SEO friendly and only renders the image in the browser if JavaScript is enabled. Your HTML/XHTML code remains unchanged, leaving your head tags readable by search engines and the page readable by those without JavaScript.
The Font Burner Control Panel plugin allows you to easily add any of the 1000+ free fonts available on the Font Burner website to your WordPress theme.