The StyleSheet - For businesses that use the internet

What’s Your Type? Using Custom Fonts on the Web

Posted November 13, 2009 By Mike Wisian |

For many years, Web developers have been limited to a very small set of fonts that are “Web safe”, or commonly installed across all platforms including Windows and Mac. There is nothing wrong with most of these fonts, but sometimes a look and feel featuring that clean, well-designed commercial font that you just purchased would really deliver your message. Thanks to emerging standards and some clever Web developers, using custom fonts on your site is now possible.

@font-face

@font-face is a CSS3 property which allows users to download a font from their site to render a Web page if they do not have it installed. This property is available on the latest versions of Mozilla Firefox and Safari and has been available on Internet Explorer since Version 5.5.  Although the @font-face property is a step in the right direction, limited browser support and font licensing issues keep this font-embedding method from becoming mainstream.

sIFR

Otherwise known as the Scalable Inman Flash Replacement, sIFR uses Javascript and Flash to replace select text on a Web page. Since Flash has the ability to embed custom fonts, this technique is cross-browser compatible and does not require the user to have the specific font. However, this method will not work if the user does not have the Flash plugin or Javascript enabled, and there is always the possibility that some ad blockers may disable the replaced text.

Cufón

Unlike sIFR, Cufón only requires Javascript to render custom fonts. In order to use this script, your font file must be converted using an automated tool, which is a relatively painless proces. The script and the file can then be linked in your page and those headings can be “fancified”. Cufón works great for presentation, but in many browsers the rendered text is not selectable (i.e. a user cannot copy/paste the text easily).

Facelift

Facelift Image Replacement (FLIR) is cosmetic surgery for your Web site. This technique uses Javascript and PHP, a server-side scripting language, to dynamically generate text in the form of images with a dapper-looking font of your choosing. Facelift does not require any conversion of the font file, unlike Cufón, but the server on which your site is hosted must be running PHP.  In addition, because the text is replaced by images, text selection is also not possible.

Typeface.js

Typeface.js is yet another Javascript replacement method. However, it differs from the rest in that instead of replacing text with images or flash, the script uses the browser’s vector drawing capability to render the text. This method has a distinct benefit since it leaves your text intact, providing a more accessible option for your users. Typeface.js does require you to convert your font using a conversion tool, and copyright issues prevent you from using certain rights-managed fonts.

Decisions, Decisions, Decisions

If you want to use custom fonts on the Web, deciding which method to use can be daunting. Consider your audience. Make sure that whatever method you use is widely supported by your target audience and degrades gracefully if the user doesn’t have Javascript or Flash enabled. Use custom fonts sparingly. Until @font-face becomes widely accepted, the techniques listed above add weight to your Web pages. The more text you replace, the slower your page load will become. If accessibility of your page content is important, perhaps it would be wise to go the (Web) safe route.

« Return to current issue

Let's get the discussion going. Please comment on this article.

Leave a Comment

Name (required)

E-mail Address (will not be published) (required)

Website