Rich Typography On The Web: Techniques and Tools

Advertisement

Let’s face it: Web-safe fonts are very limiting. Maybe a dozen fonts are out there that are widely enough adopted to be considered “Web safe,” and those ones aren’t exactly spectacular for much other than body type. Sure, Georgia, Arial or Times New Roman work just fine for the bulk of the text on your website, but what if you want something different for, let’s say, headings? Or pull quotes? What then?

You have a few options. Many people just opt for more elaborate CSS font stacks1, with their preferred fonts up front. But that still leaves a big chunk of your visitors seeing the same old Web-safe fonts.

Enter dynamic text replacement. In addition to font stacks, why not replace the heading text with an image, embedded font, or bit of Flash? The methods described below are easier than they sound. And the end result is that the vast majority of users will see the beautiful typography you want them to see. A word of warning, though: don’t use dynamic text replacement for all of the text on your page. All that would do is slow it down and frustrate your visitors. Instead, save it for headings, menu items, pull quotes and other small bits of text.

1. sIFR 2.0

sIFR2 (Scalable Inman Flash Replacement) was one of the first dynamic text replacement methods, developed in the spring of 2005. It uses JavaScript and Flash to convert any text you designate on a page to any typeface you choose and has been released as open source under the CC-GNU LGPL license3, so it’s free for anyone to use.

sIFR 2.04

sIFR is fully accessible to screen readers, because it simply displays the original text if JavaScript or Flash isn’t enabled. And because of the way text is rendered, if your visitors zoom in using a browser’s text-zoom option, the replaced text will also zoom in (only when the page loads, though, not if they zoom in afterward).

How sIFR Works

While sIFR is a rather complex system, its basic concept is simple: JavaScript checks to see whether Flash is installed in your browser. If it isn’t (or if JavaScript isn’t installed), it stops there and the visitor sees your text in whatever font you’ve specified in your style sheet. If Flash is installed, then the JavaScript measures each element on the page that you’ve designated to be converted.

Once JavaScript has measured all the elements, it replaces each with a Flash movie that is the same size as the original element. The original text is passed into the Flash movie as a variable, then some ActionScript code in the Flash file draws the text in the typeface you’ve chosen and scales it to fill the area occupied by the Flash movie.

Benefits of sIFR

  • Works with virtually any font
  • Degrades gracefully in most instances to the original HTML or (X)HTML file if the person doesn’t have Flash or JavaScript installed
  • Cross-browser and cross-platform compatible
  • Because the original (X)HTML document remains unchanged, the SEO, accessibility and other concerns people usually have with Flash aren’t really issues

Drawbacks/Disadvantages of sIFR

  • Requires both JavaScript and Flash to be installed
  • Will not be visible if a Flash ad blocker is used
  • Firefox does not easily deselect sIFR text

2. P+C DTR (With Word-Wrapping and Inner Tags)

P+C DTR (with word-wrapping and inner tags)5 (the “P” and “C” standing for PHP and CSS) is a text replacement method that works with PHP and CSS rather than Flash or JavaScript. Considering that PHP is a server-side language, and every modern browser automatically supports CSS, this method has some advantages over those that use Flash or JavaScript. This version of P+C DTR is based on the original P+C DTR method6, but with the addition of word-wrapping and inner tags.

P+C DTR7

How P+C DTR Works

P+C DTR uses PHP’s output buffering functions to extract the heading text and give it an inline style that points to the script that replaces the text with an image. Therefore, the only requirement on the back end is that the host server supports PHP image generation8.

The CSS comes into play in designating the heading’s font color, size and background color. The styling for the heading is kept in a separate CSS file, but the file is called only once per browser session, so it doesn’t have a noticeable impact on page load time.

Benefits of P+C DTR

  • Doesn’t require Flash or JavaScript
  • Not affected by ad blockers
  • Output is valid XHTML and CSS

Drawbacks/Disadvantages of P+C DTR

  • Will not work if images are disabled in the browser
  • headings have to be uniform throughout the website; you can’t have one style of heading on one page and another on a different page (unless you use a different style sheet for each page)
  • Although it does seem possible to select the text in the headings, it is difficult to do so

3. Cufón

Cufón9 was created as an sIFR alternative. It uses JavaScript to replace text, without Flash, making it more widely compatible than sIFR.

Cufon10

How Cufón Works

Using Cufón is a bit more involved than a lot of other DTR methods. You have to go through an extra step: converting whatever fonts you want to use to a format that Cufón can work with. An automated tool11 can do this, though, so technically it is not more complicated than the other methods.

Once you’ve converted the fonts, Cufón simply replaces the text in your browser with the font you’ve designated via the JavaScript. Activating Cufón is as simple as uploading the script and putting a couple of lines of code in the head of your document.

Benefits of Cufón

  • Doesn’t require Flash
  • Technically, it’s quite easy to use — even with the extra step of converting fonts
  • In general, the embedded text can be copied and pasted in any application, but it doesn’t always work – e.g. there are problems in Chrome 3 and Firefox 3.5.2
  • Because text is rendered using only JavaScript, it’s quicker than many other methods
  • Degrades gracefully if JavaScript isn’t supported

Drawbacks/Disadvantages of Cufón

  • Converts your text to image files, which means it’s not as accessible as plain (X)HTML
  • Does not seem to work in IE8 unless the page is viewed in compatibility mode It does work in IE 8.
  • Requires JavaScript
  • Accessibility issues: Cufón wraps the text inside canvases and spans and so Because. Each. Word. Is. In. Its. Own. Span. Some. Screen. Readers. Will. Read. The. Text. Like. This.
  • In Firefox, if CSS is disabled, a bizarre text duplication occurs
  • Sometimes has problems with text selection

4. Typeface.js

Typeface.js12 is a JavaScript-based dynamic text replacement method that embeds fonts on your page rather than converting them to images. This means that visitors are presented with a page that acts (and really is) like a regular HTML and CSS page.

Typeface.js13

How Typeface.js Works

Whereas most of the methods mentioned so far either replace the text with Flash or turn the text into an image, Typeface.js styles text with an embedded font using JavaScript. So, your text stays as accessible as it was before, without the need for Flash.

Typeface.js uses the browser’s vector drawing capabilities to draw the text in your HTML documents. All modern browsers support this (Firefox, Opera and Safari use the <canvas> element and SVG, and Internet Explorer supports VML).

Benefits of Typeface.js

  • Leaves the text on your page as text, making it more accessible
  • Flash is not required
  • Not affected by ad blockers

Drawbacks/Disadvantages of Typeface.js

  • Copyright issues prevent many fonts from being embedded in this manner, so only free and open source fonts can be used
  • Requires JavaScript
  • A tool is available to convert OpenType and TrueType fonts to Typeface.js’s required format
  • Font embedding causes larger page size and more HTTP requests
  • Doesn’t work in Internet Explorer when images are disabled

5. Facelift v1.2 (FLIR)

Facelift Image Replacement14 (FLIR) is another DTR alternative that uses PHP and JavaScript. Flir lets you replace any element (h1, h2, spans, etc.) with dynamically generated text and has extensive documentation available as well as a forum for getting help.

FLIR15

How FLIR Works

FLIR is relatively straightforward. JavaScript finds the parts of your page that need to be replaced. It then sends the text for each of those parts to a PHP script that generates an image with the desired fonts, and then it plugs them back in where they belong on the page.

Benefits of FLIR

  • Doesn’t require Flash
  • Supports word wrapping, so long headers aren’t a problem
  • Works with almost any font you choose
  • Degrades gracefully if JavaScript is not available

Drawbacks/Disadvantages of FLIR

  • Requires JavaScript
  • Text selection in Internet Explorer is virtually impossible
  • Will not work if images are disabled

6. sIFR 3

sIFR 316 is the newest version of sIFR. It’s currently in development, so bugs still need to be worked out. A number of new features have been added, and using sIFR is now easier.

sIFR 317

How sIFR 3 Works

sIFR 3 works much like sIFR 2.0. It uses Flash and JavaScript to replace text on the page with a Flash movie, while retaining accessibility features.

Benefits of sIFR 3

  • Same benefits as sIFR 2, mentioned above
  • Allows control of kerning, leading and line-height properties
  • Has the ability to ignore specific elements during replacement
  • Supports pixel fonts
  • Allows the use of background images within the Flash file

Drawbacks/Disadvantages of sIFR 3

  • Same drawbacks as sIFR 2, mentioned above

7. SIIR (Scalable Inline Image Replacement)

SIIR18 is another technique that replaces your original text with an image file in whatever font you choose. It includes a caching program to reduce the load on your server from all of the dynamically generated content, and it also includes some accessibility features. SIIR works with virtually any TrueType font.

SIIR19

How SIIR Works

SIIR works like most other dynamic text replacement techniques that use images to replace the original text. A mixture of JavaScript and PHP code finds the individual elements that need to be replaced; it pulls text from the website to generate dynamic images in the desired font, and then inserts those images in place of the text.

Benefits of SIIR

  • Can be used to generate text with any TrueType font
  • Documentation is very thorough and easy to understand and includes explanations of modifications you can make
  • Uses the alt attribute in images to display the original text if the browser has images turned off
  • Does not require Flash
  • Doesn’t detract from SEO, because the original text is still displayed in your code

Drawbacks/Disadvantages of SIIR

  • Replaced text does not change when a user increases text size in their browser (but most browsers now use “zoom”, so this is less of a concern)
  • Can be processor-intensive, though the caching does help
  • Copying and pasting the text in Internet Explorer is not possible

8. sIFR Lite

Based on the original sIFR technique, sIFR Lite20 is a simpler, more user-friendly technique. The result is much more light-weight than the original and entirely object-oriented. It has been tested on Safari, Firefox, Camino, IE and Opera.

sIFR Lite21

How sIFR Lite Works

Like sIFR, sIFR Lite uses a combination of Flash and JavaScript to replace the original text with a Flash file. JavaScript searches the page for elements that need to be replaced, then Flash scripts create the dynamic images, and JavaScript replaces the original text with the new Flash files.

Benefits of sIFR Lite

  • Same as sIFR 2, mentioned above
  • Much smaller file size than original sIFR (3.7 KB vs. 22 KB)
  • Will automatically detect text color in your original file, which is an improvement over the original method that requires the developer to enter the color manually

Drawbacks/Disadvantages of sIFR Lite

  • Same drawbacks as sIFR 2, mentioned above
  • Uses tag names and classes instead of CSS selectors, which does affect usability (although it does make it faster and more maintainable)

9. Dynamic Text Replacement (DTR)

This is the original Dynamic Text Replacement22 technique that appeared on A List Apart in June of 2004. It uses a combination of JavaScript and PHP to replace plain text on your page with a dynamically generated image. It is the precursor to all of the techniques discussed above. If it weren’t for this technique, many of the other ones may not have been developed. It should also be noted that the demo page for this method now redirects to the P+C DTR method mentioned above, so it seems that the original method is viewed as obsolete.

Dynamic Text Replacement23

How DTR Works

A small PHP script generates and renders a PNG image whenever it’s requested by a JavaScript file. The JavaScript file is largely based on Peter-Paul Koch’s JavaScript Image Replacement24 method. Basically, once the HTML on a page has finished loading, a JavaScript file tests for image support, and if images are supported, it finds the elements that need to be replaced and sends them to the PHP script. Using it is fairly straightforward, and only a couple of lines of code need to be configured.

Benefits of DTR

  • Doesn’t require Flash
  • If the font you’re replacing supports foreign characters, this method will work, even if the page is translated (e.g. through Google or another service)

Drawbacks/Disadvantages of DTR

  • Requires images and JavaScript
  • Text selection is difficult
  • Method is obsolete, and so is not supported

10. PHP Image Replacement

PHP Image Replacement25 (also known as PIR) is based at least in part on the method originally outlined by A List Apart but modified to be used with jQuery for better control over the end images produced.

PHP Image Replacement26

How PIR Works

PHP Image Replacement uses a modified version of the PHP script from A List Apart to dynamically create the replacement images and then uses jQuery to dynamically replace pieces of the page text with images generated by the PHP script.

Benefits of PIR

  • Claims to be the simplest script of this type currently available.
  • Takes relevant information about background, size, color, etc. from the document itself.
  • Very lightweight.
  • Maintains accessibility and degrades gracefully.

Drawbacks/Disadvantages of PIR

  • Requires JavaScript.
  • Setup requires some basic PHP and JavaScript knowledge.

11. FontJazz

FontJazz27 is a JavaScript typography engine that works entirely on the client-side and requires no server-side processes. It works with any typeface.

FontJazz28

How FontJazz Works

FontJazz uses JavaScript to render headlines in the user’s browser, rather than as images on your site’s server.

Benefits of FontJazz

  • Compatible with a wide variety of browsers, including IE5+, Firefox 2+ and Google Chrome.
  • Uses only client-side scripting.
  • Degrades gracefully, showing the original type if FontJazz isn’t supported.
  • Works with any typeface.
  • SEO friendly.

Drawbacks/Disadvantages of FontJazz

  • Requires JavaScript.
  • Doesn’t support kerning.

12. WordPress Plug-Ins For Dynamic Text Replacement

A few WordPress plug-ins are available for some of the dynamic text replacement methods mentioned above, as well as two that are unique to WordPress. The biggest advantage of plug-ins is that less coding is usually required, and you’re less likely to run into bugs from conflicting scripts.

Facelift Image Replacement (FLIR) for WordPress

WP FLIR29

FLIR30 for WordPress is still in development but is close to being completed. It works just like the FLIR method mentioned above. The main bug currently present is that automatic updates don’t always work. Almost all of the configuration for FLIR can be done from the admin panel, though you’ll still need to do some things manually (such as upload and configure fonts).

WP sIFR

WP sIFR31

WP sIFR32 works like sIFR 2.0. The only configuration you have to do is upload your SWF font file to the plug-in directory and activate the plug-in. All of the other configuration is done from within the WordPress admin panel.

WP-Cufon

WP-Cufon33

WP-Cufon34 lets you easily use Cufón on your WordPress website and it includes good documentation and regular updates. It also works just like Cufón, so you’ll still need to convert your fonts beforehand. Configuration is done directly in the admin panel in WordPress.

AnyFont

AnyFont35

AnyFont36 uses custom fonts (TrueType or OpenType) to replace text in post titles, menu items, and pretty much anything else in your WordPress theme. It has a font manager that you use to easily upload new fonts from within WordPress; it has built-in style management; you can add shadows to your text; it includes cache management; and it uses SEO-compatible image replacements.

Font Burner Control Panel

Font Burner Control Panel37

The Font Burner Control Panel38 is a different technique for adding fonts to your website. Basically, it allows you to use any of the more than 1000 fonts available on Font Burner on your WordPress blog. All you have to do is upload the plug-in to your plug-ins folder, activate it and then configure it through the admin panel.

13. Font Embedding Options

Embedding fonts is another option if you don’t want to use an image replacement technique. While you can upload fonts to your own server and use @font-face that way, it uses a lot more bandwidth and there can be intellectual property issues to deal with. The services below offer a great alternative by hosting fonts for you and serving them remotely. The advantage is, obviously, that you can have a rich embedding of commercial fonts in your designs; the drawback is that these services usually require membership and a monthly fee.

Typotheque

typotheque39

Typotheque40 is a service that lets you use the @font-face rule in CSS. It works with fonts within the Typotheque collection, which currently consists of more than 25 typefaces. They have a free trial license available, as well as a variety of paid options.

Kernest

Kernest41

Kernest.com42 is another web service that takes advantage of the @font-face attribute in your CSS and serves fonts for you, saving bandwidth. They serve both free and commercial fonts. Pricing is based on the font(s) you choose.

Typekit

Typekit43

Together with various typographic foundries, Typekit.com44 has developed a web-only font linking license that allows for rich font embedding in web design and also protects interests of type designers. Typekit uses jQuery and a subscription service to allow designers to embed non-standard, non-system-specific fonts into HTML-pages.

As other services, it uses the @font-face CSS property. The configuration takes place via the Typekit’s plattform; to use the fonts, designers just need to insert two JavaScript-snippets into their pages. The service offers a platform that hosts both free and commercial fonts and has various plans ranging from $24.99 per month to $49.99 per month. The service is in closed beta (October 2009). Developed by Jeffrey Veen.

FontDeck

Fontdeck45

Fontdeck46 is an upcoming font embedding solution from Clearleft and OmniTi. As other services, FontDeck is a font-face delivery system that will work keep both font designers and web designers happy. Developed by Richard Rutter and Jon Tan. Not available yet.

Dynamic Text Replacement Methods Compared

Here’s a handy table that shows the features of each technique mentioned above:

Method Technology Used Font Types Supported Images?
sIFR 2.0 Flash, JavaScript Not specified No, Flash
P+C DTR PHP, CSS Not specified Yes
Cufon JavaScript Must be converted: TTF, OTF, PFB, PostScript Yes
Typeface.js JavaScript Must be converted: TrueType, OpenType Yes
FLIR JavaScript, PHP Not specified Yes
sIFR 3 Flash, JavaScript Not specified No, Flash
SIIR JavaScript, PHP TrueType Yes
sIFR Lite Flash, JavaScript Not specified No, Flash
DTR JavaScript, PHP OpenType, TrueType Yes
PHP Image Replacement JavaScript, PHP, jQuery Any Yes
FontJazz JavaScript Any Yes (background)
AnyFont WordPress-Only TrueType, OpenType Yes
Font Burner Control Panel WordPress-Only Font Burner Fonts Only Yes
Typotheque @font-face Typotheque Fonts Only No
Kernest.com @font-face Kernest.com Fonts Only No
Typekit @font-face Typekit Fonts Only No

Further Resources:

About the Author

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing51. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity52.

(al) (ll) (vf)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/
  2. 2 http://www.mikeindustries.com/blog/sifr/
  3. 3 http://creativecommons.org/choose/cc-lgpl
  4. 4 http://www.mikeindustries.com/blog/sifr/
  5. 5 http://www.joaomak.net/util/dtr/
  6. 6 http://artypapers.com/csshelppile/pcdtr/
  7. 7 http://www.joaomak.net/util/dtr/
  8. 8 http://br.php.net/manual/en/ref.image.php
  9. 9 http://chrisjennings.com/2009/02/introducing-cufon-sifr-alternative/
  10. 10 http://chrisjennings.com/2009/02/introducing-cufon-sifr-alternative/
  11. 11 http://cufon.shoqolate.com/generate/
  12. 12 http://typeface.neocracy.org/
  13. 13 http://typeface.neocracy.org/
  14. 14 http://facelift.mawhorter.net/
  15. 15 http://facelift.mawhorter.net/
  16. 16 http://novemberborn.net/sifr3
  17. 17 http://novemberborn.net/sifr3
  18. 18 http://www.whaleofadive.com/misc/siir/about.php
  19. 19 http://www.whaleofadive.com/misc/siir/about.php
  20. 20 http://www.allcrunchy.com/Web_Stuff/sIFR_lite/
  21. 21 http://www.allcrunchy.com/Web_Stuff/sIFR_lite/
  22. 22 http://www.alistapart.com/articles/dynatext/
  23. 23 http://www.alistapart.com/articles/dynatext/
  24. 24 http://www.quirksmode.org/dom/fir.html
  25. 25 http://www.xanthir.com/pir/
  26. 26 http://www.xanthir.com/pir/
  27. 27 http://fontjazz.com/
  28. 28 http://fontjazz.com
  29. 29 http://www.23systems.net/plugins/facelift-image-replacement-flir/
  30. 30 http://www.23systems.net/plugins/facelift-image-replacement-flir/
  31. 31 http://labs.jcow.com/plugins/wp-sifr/
  32. 32 http://labs.jcow.com/plugins/wp-sifr/
  33. 33 http://www.tobias-battenberg.de/wp-cufon/
  34. 34 http://www.tobias-battenberg.de/wp-cufon/
  35. 35 http://2amlife.com/projects/anyfont
  36. 36 http://2amlife.com/projects/anyfont
  37. 37 http://www.fontburner.com/the-font-burner-wordpress-plugin/
  38. 38 http://www.fontburner.com/the-font-burner-wordpress-plugin/
  39. 39 http://www.typotheque.com/webfonts
  40. 40 http://www.typotheque.com/webfonts
  41. 41 http://www.kernest.com/
  42. 42 http://www.kernest.com/
  43. 43 http://www.typekit.com/
  44. 44 http://www.typekit.com/
  45. 45 http://www.fontdeck.com/
  46. 46 http://www.fontdeck.com/
  47. 47 http://csstinderbox.raykonline.com/?tag=dynamic-text-replacement
  48. 48 http://www.hongkiat.com/blog/dynamic-image-replacement-practical-techniques-and-tools/
  49. 49 http://www.netmag.co.uk/zine/javascript/dynamic-text-replacement
  50. 50 http://zomigi.com/blog/roundup-of-font-embedding-and-replacement-techniques/
  51. 51 http://cameronchapman.com
  52. 52 http://internetfamousbook.com

↑ Back to topShare on Twitter

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Thanks for the great post! It’s time we move beyond Arial and Helvetica and Tahoma.

  2. 2

    Hi,
    I was searching this for a while for my new project…
    Thanks a lot SM for timely help ;-)

    Best,
    DesignFellow

  3. 3

    Cufón doesn’t even require Flash twice :P

  4. 4

    Nice post! Funny b/c I’ve just used a small swf for my type logo. I wanted a transparent background logo but could not use png due to the cursed IE6 (every page has a differemt expandable BG). NowI dont feel like a weirdo anymore…

  5. 5

    I can’t wait for CCS3 to be official, all of this would be solved then.

  6. 6

    Why are you still shouting about technologies that are becoming outdated.

    With most modern browsers and the emergence of freely available fonts, @font-face is now a viable option.

    Most of the good free fonts even include the .EOT file needed for the dreaded M$ browser.

    See Font Squirrel and Jonny Haynes for more details.

  7. 7

    Floris Fiedeldij Dop

    October 22, 2009 8:03 am

    Read it twice, excellent article. Keep up these awesome contributions to this site.

  8. 8

    I use Cufón on websites to replace headings; it’s great. And as far as I understand, it’s completely safe for search engine spiders.

  9. 9

    I don’t know that I am completely sold on @ Font Face …

    I’ve tried it several different times with different OTF fonts, on different servers, with different ISP’s and found that there is always a slight load time for the font to load. Which causes your default font to load first, then magically your OTF font snaps into place.

    Personally, I don’t dig the cosmetics of the load for @font face. I am sure, over time, I would get over it, but right now, I don’t like it. It’s still a great technology, regardless.

  10. 10

    That was a hell of a post! THE ultimate round-up of fonts replacement techniques…
    Thanks SM !

  11. 11

    Drawbacks/Disadvantages of Cufón
    * Does not seem to work in IE8 unless the page is viewed in compatibility mode

    Works for me.

  12. 12

    Thanks for the all in one list. I’ve been trying to figure out what one to use going forward and having everything (especially those I’ve never heard of) all in one post combined is a great help.

    Thanks!

  13. 13

    Good article. I regret just the absence of solution about the hyphenation, such as hyphenator.js

    http://code.google.com/p/hyphenator/

    but I am just teasing :)

  14. 14

    Has anyone researched the legal issues regarding using fonts with these techniques? I’m curious if one can get into trouble for using a certain font in something like sifr.

  15. 15

    Really great article. Thanks a lot.

  16. 16

    As a first-time commentor, I notice that SmashingMag (a WordPress blog) has some serious accessibility, usability & transparency issues:

    1) JavaScript appears to be a requirement, to leave a comment. Unfortunately, not every visitor has JavaScript or has it enabled. By disregard for these individuals, your site has accessibility issues.

    2) After enabling JavaScript and upon comment submission, there is no “success” message (or ANY message for that matter) … submitted comments disappear into a black hole. (Good web design provides expected behaviors and good practice informs visitors what will happen).

    3) If comments are being moderated (I’ve submitted two, so far and neither has been published – so I suspect they are) the visitor should be made aware of this.

    (EDIT: I see moderation is reserved for comments containing links. Saying “Comments containing links are moderated” would be an easy fix.) ;-)

    LOL … The only way I could “see” my comment was to submit one w/o a link, which I could then edit. Once I added a link, the comment was marked for moderation, but editable. When I edited it again and changed the link text, it was marked as “SPAM” and summarily deleted. (Conclusion: The commenting work-flow here @smashingmag sucks. You guys need a good web designer. Some bunch of “experts” you are! LOL)

  17. 17

    As cool as this stuff is, I actually think font limitation is good for the web. While it would be nice not to have to explain to graphic designers why their fancy fonts don’t work on the web, I think overall usability would plummet if fonts were easier to use and more of them were available (note that none of these methods are easy).

  18. 18

    This techniques will be necessary for a long time. Despite the advent of css3 the old browsers, without support, still be most.

  19. 19

    (SM) Ryan, thank you very much for your feedback. We tested Cufón on 4 different machines and the problem occured every time. We still can not copy and paste text. If we click and drag the mouse over the text and copy it, we can NOT paste the exact text into any program. Unfortunately. Not sure what we are doing wrong. Take a look at the example here: http://chrisjennings.com/examples/cufon/cufon-example.html. The same problem occurs here – http://www.mezzoblue.com/archives/2009/05/07/font_embeddi/ (tested in Chrome 3, Firefox 3.5.2). It does work in IE 7/8, though. Any ideas? We already contacted the developer of Cufón to clarify the issue.

    Smashing Mag, this is horrible. I don’t know about the others, but this writeup on Cufon is almost completely, entirely wrong. Did you even bother checking out the Cufon site, where you can see Cufon working fine in IE8 in standards-compliant mode? Or how about just pinging twitter to ask designers how it works in IE? If it doesn’t work in IE, you’re doing it wrong, I’ve never had any problem and use it on almost all my sites.

    Also, the text is selectable. Your browser may not highlight the images, but if you click and drag the mouse over the text and copy it, you can paste the exact text into any program.

    This also means that your other point about accessibility is false. Cufon wraps the text inside canvases and spans. The text is still there. The text is no less accessible than any other HTML document that wraps spans and divs around content. A screen reader will read the plain text inside.

    SM, you have an obligation to provide accurate content to your readers. This means actual research. Apparently, you’re too lazy to do it, and possibly even correct your article. One of the reasons I’m reading this blog less and less these days.

    • 20

      Well funnily enough I ran into this post because the exact same thing is happening on a site I’m developing. The font renders fine in every browser, and in IE8 standards mode it renders too, I just can’t see it. Anyone got any bright ideas? (I’ve already tried Cufon.now() and visibility:visible, neither worked.)

  20. 21

    “Also, the text is selectable. Your browser may not highlight the images…”

    Which I imagine is why they said that there are problems with it, and not that it was impossible.

    “Cufon wraps the text inside canvases and spans.”

    Because. Each. Word. Is. In. Its. Own. Span. Some. Screen. Readers. Will. Read. The. Text. Like. This.

    These are accessibility issues, but I agree that SM could probably have gone into further detail about what the issues actually are.

  21. 22

    I think ‘FontJazz’ has great benefits. I will try it now.

  22. 23

    Nice stuff! Thank you!

  23. 24

    @Ryan:

    I’m viewing the following page in IE8, in standards-compliant mode:

    http://chrisjennings.com/examples/cufon/cufon-example.html

    The text does not show up. The headings are completely blank. When I click the “Compatibility View” button, the text appears, just as it should, with the custom Cufon-enabled font.

    Now, from what I understand, that page is one of the official example pages for Cufon, so you can’t blame SM for that. I notice that page is lacking the “cufon.now()” statement before the closing body tag, so that may be the issue.

    Now, when I visit example sites where Cufon is implemented, it does work fine in IE8. But obviously that problem on the example page should be fixed, because some people will be using that for cross-browser testing, which is obviously what SM has done.

  24. 25

    This is such a big fucking sigh. No, not the post. It’s great. Only the fact that it is 2009 and we still dont have a PROPER way to put up some good typography on the web.
    It makes me cry.

  25. 26

    Wow. I’ve read a lot of articles covering a subset of these techniques, but I’ve never had the pleasure of reading such a well-rounded, all-encompassing piece.

    Very nicely done, thank you very much!

  26. 27

    That’s smashing!
    Finally a USEFULL article after weeks of so so stuff.
    Bravo and thank you.

  27. 28

    Thanks for the information….
    Does anyone else think this is all a pile of garbage?

    Is anyone testing these methods in mobile browsers? Does anyone care about bloating there pages with hacks for this purpose?

    I get that it sucks to not have 1000 font choices, but this feels just as bad or worse than using tables for layout….

    Yuck

  28. 29

    Nice roundup. I like to use SIFR3 or CUFON. Here is another way to embed fonts in your website. Two great ways to embed a font in your website

  29. 30

    @Ian

    Interesting, I was under the impression that was SM’s own test page. I’m not familiar with this Chris Jennings fellow, but I know if you go to the Cufon demos page at http://wiki.github.com/sorccu/cufon/demos , the page they linked to isn’t listed. In any case I agree it is probably the improper usage of the closing script.

    I’m not a browser or javascript expert so there may be issues with particular browsers. I know I’m on some iteration of FF 3.5 and Chrome and haven’t had any issues, so I guess they just got really unlucky on this one.

    Regarding the canvases and spans: It should be noted that all or nearly all of these methods use spans for the replacement. So any screen reader that behaves that way with Cufon would behave the same way with any technology that breaks them into individual words instead of phrases, which is almost all of them, to preserve multi-line headlines.

    Finally, I agree the selection process isn’t ideal, with no visual feedback. I thought the original article said it wasn’t selectable. If this is unmodified from the original, then I agree that the statement as it presently stands (“sometimes has problems with text selection”).

  30. 31

    does Typeface.js use images or not?

  31. 32

    If I’m remembering right, Typeface.js works similarly to Cufon in that it draws the font in a canvas element (or VML in IE).

    (edit) Just checked, and yes, that’s how it works.

  32. 33

    Fontjazz is really awesome…easy to use, modify,..seo friendly…even if JS is disabled the text will appear,…my favorite one…

    #SM wow, you get some angry commentors !!! where the success is…

    keep us your good work…

    Thx

  33. 34

    cool! will apply this to my wordpress theme!
    thanks!

  34. 35

    Thanks for the great roundup! I would really appreciate Smashing Magazine writing an article detailing how to build your own @font-face web embeddable fonts.

  35. 36

    This is very useful

  36. 37

    Since my comment never showed up for some reason (a link?), I guess I’ll repost it.

    @Ian

    Interesting, I was under the impression that was SM’s own test page. I’m not familiar with this Chris Jennings fellow, but I know if you go to the official Cufon demos page, the page they linked to isn’t listed. In any case I agree it is probably the improper usage of the closing script.

    I’m not a browser or javascript expert so there may be issues with particular browsers. I know I’m on some iteration of FF 3.5 and Chrome and haven’t had any issues, so I guess they just got really unlucky on this one.

    Regarding the canvases and spans: It should be noted that all or nearly all of these methods use spans for the replacement. So any screen reader that behaves that way with Cufon would behave the same way with any technology that breaks them into individual words instead of phrases, which is almost all of them, to preserve multi-line headlines.

    Finally, I agree the selection process isn’t ideal, with no visual feedback. I thought the original article said it wasn’t selectable. If this is unmodified from the original, then I agree that the statement as it presently stands (”sometimes has problems with text selection”).

  37. 38

    nice overview. But why do you consider “Uses only client-side scripting.” (font Jazz) as a Benefit? As far as I know, most web sites underestimate the potential of client-side performance optimization.

    Anyway, if one is keen enought to have a unique typeface, it is likely considered as a higher priority than client-side rendering time.

  38. 39

    Cufón is NOT using images. It is only using JavaScript to render a HTML object! (or if IE6) And why are you stating this as a Cufón disadvantage: “In Firefox, if CSS is disabled, a bizarre text duplication occurs” ? Can you name one browser that has JS support but not CSS support? That disadvantage versus not mentioning that sIFR is REALLY slow, that’s much more important! Also, about FontJazz, you are not mentioning that is doesn’t support foreign characters such as Swedish, Russian characters etc. which can be the crucial factor for choosing technique.

  39. 40

    That’s a really useful round-up – thanks.

  40. 41

    RGP !
    (really great post)
    I think that the table above miss the kb-weight-column.
    In my company we are very sensible at the web pages weight.

  41. 42

    i’ve spend few day to research on this topic last month
    thanks for your usefull topic :)

  42. 43

    thank you very much for this article and all those informations!
    Great timing! I was allready searching for tools like this.

  43. 44

    About TypeKit, “…various plans ranging from $24.99 per month to $49.99 per month.”
    They are ranging from $24.99/year to $249.99/year. ;)

  44. 45

    I am currently using SIFR for my website. Just to reply to some of the comments that people posted saying that this technology will be outdated with new browsers and css3. This is not the case. If you design websites for a corporation that has a very specific type face they use to represent their company, and that type face is copy written so you can’t just make it available to clients. You have no choice but to use either flash replacement, or back end image replacement.

  45. 46

    I use Typekit and I really like it. I recently wrote a post about my thoughts on it.

    http://rmlumley.com/2009/10/thoughts-on-typekit/

  46. 47

    I’ve been using a combination of Cufon, jQuery, @font-face, with fontAvailable and it’s worked pretty well for me (thanks to Samer). Here’s a post I found on his site. http://sameropensource.blogspot.com/2009/07/embedding-your-font-with-font-face.html It essentially checks to see if @font-face is available and if not uses Cufon as a backup.

    Anyone else tried this method? If so, have you found any drawbacks (other than extra script requests)?

  47. 48

    Nice overview
    I like pure font-face the most, speaking mainly about personal projects. It’s not 100% supported yet, but in time old IEs will die out and modern browsers will support it

  48. 49

    As long as it degrades okay, then really no problems, if you are not enabling Javascript on your browser, turn your computer off and get out the gramafone, webforms, online purchases the list goes on, just about every site is running JS and needs some Flash support. Maybe we should still support Netscape and IE5.

  49. 50

    @Joshua & others interested in @font-face,

    Google “cross-browser font embedding” for a good @font-face primer at randsco.com (or head their directly & search for ‘typographic wasteland’)

    (I’d link it, but I tried yesterday and it still hasn’t been added by the SM moderators – boo hiss)

    Shame on SmashingMag for glossing over the easiest, most straight-forward way of embedding fonts.

    Benefits of @font-face
    1) easy to deploy
    2) doesn’t rely on JavaScript
    3) doesn’t rely on Flash
    4) doesn’t rely on 3rd-party servers
    5) text is text (swipe, SEO, copy-paste)
    6) no monthly/annual fees
    7) widely supported (ie6,7,8; FFx3.5+, Safari win/Mac, Opera10+ and – soon – Chrome4)

    Font files are no more of a load on the server than images (many are 50-150kb) which btw, also suffers from the same copyright issues as do fonts … so I disagree with SM’s assessment about serving your own font files.

    Hope this helps.

  50. 51

    Its was really great article. I would probably look for very easy method,might be in future :)

  51. 52

    Typekit price and I found it here hmmm…. over pay for fonts or dedicated server more treat in other forms I don’t Think I could convince a client that the should pay an extra $25-50.00 per month so they can have a font.

    A truly niche market for fools or people with money to burn I like the idea but I think I will pass otherwise cufon works well, sfir is a headache, facelift is decent.

    Font-face plenty of good open source fonts to use as far as the foundries if you can’t grow you gotta go.

    Stop charging like everyone is corporate backed reach out and maybe just maybe you can revitalize your business and get your heads out of your ass.

    I love you all

  52. 53

    Really great and useful article, thanks for share

  53. 54

    http://font-face.com looks like a really good solution. Just can’t wait till they get it up and running.

  54. 55

    Cufon.set(‘separate’, ‘none’);

    Add this line of code to the bottom of your cufon.js and it’ll add the entire tag that is being manipulated to 1 span.

    Here’s an example …

    this is a span

    w/o the line of JS that H1 get’s rendered by cufon as “this” “is” “a” “span” – with the line in the JS file it renders the H1 properly “this is a span”.

    Just wanted to share. I’ve been using cufon religiously for about 2 months now on 4 major sites i’ve been working on and love it. It’s really nice as you can manipulate it wonderfully with CSS too (unlike SIFr, whose CSS support sucks). Good coding!

  55. 56

    It’s because of posts like this that I’ve pre-ordered the Smashing Magazine book. Thanks for yet another fantastic article!

  56. 57

    Nice list, but: Why is it a disadvantage if the technique is only available using Javascript??? Ever heard of graceful degradation?!? Of what use would it be if a search crawler or someone using a text-only client could also “see” the typography replaced with an image or something else??

    I’d suggest: Think before you write ;)

    cu, w0lf.

  57. 58

    Really great and useful article.

    But i have doubt, which one is the really good one & compatible.

  58. 59

    Nice! I knew about sIFR2/3 but not all these you mentionned above. Will test and use the best in my projecs now…

  59. 61

    @aflightandacrash As i wrote earlier, you don’t pay per month but per year. And the prices range from $24.99/year to $249.99/year. So it’s actually very cheap since you can use multiple fonts with correct licensing on up to 40 websites.

    Can some admin change this is in the article, quite missleading ;)

  60. 62

    There is some confusion about accessibility in the comments and some in the article as well.

    Cufon wraps the text inside canvases and spans. The text is still there. The text is no less accessible than any other HTML document that wraps spans and divs around content. A screen reader will read the plain text inside.

    The quote is unclear. Probably correct, but unclear. Text inside canvas elements will not be presented to screen readers – at least with todays AT technologies. The fallback content is only presented to AT technologies if it fails to render, i.e. it will not be read if the canvas is drawn. It will only be read if the canvas element is unsupported.

    Cufon, does not wrap the text inside the canvas tags, but each word is presented in a span that follows the canvas, but hidden from sighted users with CSS. It would have been equally easy to wrap all words in a single span, which would have made this technique almost perfect – until screen readers start to access the content of the canvas itself, which would mean that screen readers would get duplicate content. But by then we probably have widespread support for CSS 3 @font and do not need any solution listed above.

    To complete this explanation. The HTML5 spec has been recently updated to allow AT technologies to access the fallback content of canvas even if the canvas is rendered. No browser/AT combo currently support this, though.

    Many other techniques above have inaccessibility issues not mentioned as well. E.g. FontJazz that replaces the original HTML heading tags with JavaScript inserted divs. It would not be a problem if the headings elements had only been altered, but now they are replaced. Screen reader users rely on proper usage of h1-h6 to navigate the document. And they use the DOM that is the product of the scripts, not the source HTML – unless JavaScript has been turned off, which it rarely has nowadays, since that would mean they miss too much content, since most pages are crappy anyway…

    Ergo: You must carefully examine each solution, and look at the rendered DOM as well as the original HTML. This article will serve as an introductory guide, but from an accessibility viewpoint, the information is not complete.

    Personally, today, I would probably use Cufon, but with an additional script that concatenates all words into a single span.

  61. 63

    Adding to myself.

    I took a look at PIR. It could benefit from putting all text in the first image alt attribute and set the others to alt=””. That would improve its accessibility big time.

  62. 64

    Here is the unique article about cross browser cont embedding with @font-face by Jonathan Snook:

    http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master

    @font-face is the best practice i think for the custom fonts

  63. 65

    Like others here, I don’t understand the interest of advertising for all these crappy techniques whereas @font-face seems (at last!) to reach adulthood…

  64. 66
  65. 67

    Foundries need to release fonts that are distributable via the web.

    All these hack are stupid.

    63. How many fonts can you find that are freely distributable? None of the foundries sell anything like this really. Free fonts? Are mostly bad.

    This is the problem. It is fine that the tool is there but currently there is very little media to distribute due to licensing.

  66. 68

    Great article!
    I’m sticking to FLIR since quite some time, but I honestly didn’t know that there was such a broad range of different scripts for font replacement, maybe I’ll try some of the others…
    I also have an beta-account on typekit.

    I think it is an essential part of web design to be able to use more than just the web safe fonts and it is really great that there are so many solutions out there. I’m really looking forward to the full implementation of CSS3 in all browsers, so that we can all start using @font-face.

  67. 69

    Ruby mates would like Textorize too. It generates high quality type images and promises a lot.
    http://textorize.org/

  68. 70

    Nice list, didn’t know some of the techniques

  69. 71

    Great post, I’ll use sIFR3 for my next project.
    I work for an usability company, so accessibility is crucial, and sIFR offers that ! The problem is the slowness.
    I didn’t try others options that you describes, not enough time.
    But why didn’t give us a conclusion of this comparative? Which is the best?

  70. 72

    i’d have to agree with orhaan @font-face is the best practice for custom font embedding. current versions of all major browsers support it, then older versions just fall back to the standard fonts we’ve always used. font squirrel, paul irish and johnathan snook have all made leaps and bounds in addressing this.

  71. 73

    One disadvantage of Cufon is that most font houses will not allow their fonts to be used with it. They believe it to not be secure and leaves the font open to copyright issues. Please check with the foundry of your chosen font before you get to deep into your project. We were recently burned by this and had to shift to a sIFR solution last minute

  72. 74

    I have to reitterate James Sheldon’s concern (comment 27) for mobile devices.

    I hate plain fonts and wish there was an easy way to use typography to make a page more interesting without bloating it with images. Broadband has spoiled us, and allows up to put a ton of content, images, and scripts on pages. But as an iphone addict who regularly uses the device to surf the web now it’s become strikingly clear how bloated many pages have become.

    I think if I were to use any of these options that I’d want to consider creating mobile page that stripped out a lot of the extra glitz and glam.

  73. 75

    Do these solutions support different language specific characters? I tried the FontJazz solution but no characters other than the English alphabet were generated.

  74. 76

    Elvis H Martuchelli

    October 28, 2009 2:36 pm

    Very good article! Missed examine the jQuery Flash Plugin: http://jquery.lukelutman.com/plugins/flash/
    excellent plugin similar to sIFR. Regards from Brazil!

  75. 77

    As others noted, @font-face is the best option for custom fonts, you just have to make sure that font license allows you to do that. As far as I know, type foundry Typotheque is the only one that allows using their fonts with @font-face, so you pay only one time for a license.

  76. 78

    so whats of all is better?

  77. 79

    Am I the only who is not happy with any of these solutions.

    With good letter-spacing, line-height and so on we can build beautiful typography using none of these techniques. Arial, Verdana and Georgia aren’t that bad.

    My experience is that using many of these you get a flickering. I mean you first see the websafe font and then suddenly it changes to the “nice” font. I’m sorry, but I’m not happy with that.

  78. 80

    Andris is right, it is absolutely possible to create beautiful typography with standard web fonts and attention to detail. Some of the best typography I’ve seen online used Arial or Georgia at a large size with varying font weights for emphasis.

    There are times however when a site needs a non-standard typeface to create the mood required, e.g. a handwritten typeface for a grungy art site, or a delicate script typeface for a luxury fashion site, etc. Personally I use http://www.typeselect.org/ but generally only for headings.

  79. 81

    Great article. Very helpful and detailed comparison. I can now make an informed decision rather risking my SEO strategy in the face of a much needed makeover.

  80. 82

    Nice article! Very helpful, thank you.

  81. 83

    Agustin Amenabar

    March 15, 2010 10:07 pm

    I had used sIFR and was nice, but SLOW, today I tested sIFR Lite and is awsome, has a few bugs regarding flash 10 detection (inherited from sIFR 2) but in the following site, there’s a fixed version.
    http://www.wowebmaster.com/javascript/sifr-lite-faster-smaller-sifr/
    this only works with ASCII charset, but I found a fix for that too, just replace, on line 45
    the escape(… for decodeURIComponent(… and that’s all.

    I’m Amazed how much more easy to use is sIFR lite than sIFR 2 or 3. But still may have a few bugs to fix.
    I’m already using it in a current project.

  82. 84

    Very cool, it’s useful for me :)

  83. 85

    I’d suggest you change the FontDeck part, since it’s out of beta, and works like a charm! Of course, you’ll have to search for free license fonts, since those have no limitations of use, and you don’t have to pay a thing.

    I tried it and it works in FF,IE8,Safari. I’m too lazy to try the others but I guess it works.

  84. 86

    Maybe a new post… sIFR is complicated. @font-face will certainly be the standard (good work by google http://code.google.com/webfonts ) BUT it’s not clean yet on all OS/Browsers… We have to wait. Example : If it’s clean on your Firefox with Win7 or Max OSX it’s certainly dirty on ie7 on XP. Unfortunately that’s includes most of visitors.

↑ Back to top