Blog (view all)

Designers spend a lot of time picking out the perfect fonts for their designs. When those fonts are replaced with web-safe fonts, it can discourage the designer, because the final website doesn't look as clean or stylish as their initial mockup. It is for these reasons that dynamic font replacement techniques have become so popular. But if you aren't familiar with your options, you may find that you are working with unnecessary restrictions. 

To help those of you who may just be entering the world of dynamic font replacement, I have put together this comparison. The formats mentioned here refer specifically to different Drupal Modules, so this comparison deals with the control you have within Drupal and does not resort to hacking code in any way.

Flash Replacement

The Dynamic Rendering module uses a technology called sIFR that uses a flash file to dynamically replace the text. The file is called through javascript, but renders the text in a flash .swf file. This approach was the early solution to the font replacement approach. This approach also has a number of issues that have been eliminated by other replacement options.

To use sIFR, you must download the flash file, edit a text field in the file to use the font of your choice, then export the .swf of that file. Once you upload the .swf file, you can reference that with the Dynamic Rendering Module for Drupal.

- The first issue I noticed with the sIFR approach is the trasparent backgrounds. This feature has been buggy in the past and forces you to set a background color of some sort, thus creating a various number of styles for each part of the site with a different background.

- The second issue I noticed was the size of the font. The sIFR displays the dynamic text with a width of the original text. So if the sIFR font is wider than the original, it will scale down the font size to fit the width of the original header. This also applies for multi-lined headers. In my experience, it is displayed in one line that is shrunk down to the display width.

- It requires the users to not only have Javascript enabled, but flash as well.

+ This approach works the same way across mostly all browsers that I have tested.

Image Replacement

The image replacement approach is the technique that has moved in since the flash replacement. This removes the need for enabling flash and solely requires the user to have javascript enabled. Since javascript has become a web standard, it is far less likely that the users will not see the javascript/jquery that you have used on your site.

Signwriter - The signwriter module for drupal uses the GD Image Library to create the image snapshots of the font. This works in a similar manner to Image Cache, in the sense that the server handles the image manipulation. It then can use Drupal theme functions to replace text headers with images.

- When I have used Signwriter, I have seen the fonts regularly displayed in blocky and pixelated ways. This may be more of a server setting than a module issue, but it hinders my use of the module none-the-less.

- There are a number of (mostly unecessary) settings to set up your style. Although it is nice to have a number of options, all settings are displayed by default and some are required or have defaults set that may not seem necessary (like set widths). This also requires manually setting each size, color, and hover state for each instance of the font.

+ There are settings for dropshadows, outlines, and hover states.

Cufon - This uses a rendering engine build in javascript and the module builds on the jQuery library with it's own javascript file to replace headers with images. The interface is simple to get it up and running, however, you still need to visit the Cufon website to generate a script for the font that you would like to use.

- The multiple singled-out images may make the text areas confusing when inspecting the page

+ Handles sizes, colors, and hover states based on the CSS files - which is GREAT for a themer because you don't have to re-state the font styles when you install the module.

+ Set the targets per font, rather than per style. You can list the targets seperated by commas in one box. Since the styles are pulled from the CSS, you don't have to worry about creating new styles for each display of the font on your site. This also includes menus and links with hover states. You can enable hoverstates with a checkbox.

SUMMARY

In my opinion the Cufon module is the easiest to use and creates a very professional display of the font scripts you create. But before you choose, consider the following:

All of these modules use a replacement style that hides the text within the div that you target. Make sure you consider this with your SEO person/company to consider any indexing issues. The text will still get indexed because it is still printed in the code, but there are a number of opinions abou this.

Some other image replacement modules for Drupal include TextImage and FaceLift. Facelift has the lowest usage statistics on Drupal.org, with around 300, but the rest of these modules all range around 1,000 in usage. So they are all fairly equal in this case. Before using these modules, I would recommend you checking the issue ques and installing them in a development environment before using them on a live production site. In addition to the low usage statistics and the fact that most of these modules are in a beta or dev version, take a moment to test them for yourself before settling on a dynamic font replacement technique. Each of them have their own pros and cons that you should consider before implementation.

If you use a specific font replacement technique, let us know! Leave a comment below and start a discussion on your technique to find out what other people are saying.