Exploring Cufón, a sIFR alternative for font embedding

~ 19 March 2009 ~

Thanks to a tweet from Jason Santa Maria a few weeks ago (and his help since), I was pointed to Cufón, which “aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use.”

I’ll refer to these tests again in a minute, but feel free to jump ahead to these Cufón test pages that I’ve put together.

sIFR, as many of you are aware, is a means of replacing “short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems” using a combination of Flash and JavaScript. Shaun Inman, Mark Wubben, Mike Davidson, and several others put in many long hours developing and refining IFR and sIFR, and we all owe them our gratitude for moving forward in a big way the state of typography on the web. These efforts continue today, as evidenced by this Web Typography mini-site from a SXSW 2009 panel.

For many of us, however, the Flash part of these technologies makes it difficult to set up and use. (I personally have not opened Flash on my computer in literally 4 years, and I hope to keep that run alive.) Cufón, on the other hand, can be set up and run on your site in about 5 minutes. However, there are drawbacks compared to sIFR, which I’ll get to towards the end of this article.

What we really need to be working towards as an industry is @font-face. However, despite good browser support, @font-face faces EULA (end-user licensing agreement) issues similar to Cufón and seems much more difficult to configure than Cufón because of the proprietary Microsoft .eot files required to make it work. For additional information on @font-face, see Jon Tan’s Making Web Fonts Work and the aforementioned SXSW 2009 panel links.

Therefore, I personally see Cufón as an good interim step between sIFR and @font-face. Let’s move on with getting it set up to use.

Setting Up Cufón

Here’s how Cufón works:

Step 1: Download the Cufón script compressed or uncompressed.

Step 2: Upload the typeface of your choice using the Cufón generator, which will provide you with a second script.

Step 3: In the <head> of your document, add the Cufón script and the typeface script provided by the generator, such as:

<script src="/scripts/cufon-yui.js" type="text/javascript"></script>
<script src="/scripts/KievitPro-Regular_400.font.js" type="text/javascript"></script>

Also add this just before the closing </body> tag to avoid a flicker issue in IE:

<script type="text/javascript">Cufon.now();</script>

Step 4: Also in the <head>, indicate which HTML elements or selectors should be replaced with your typeface, such as:

<script type="text/javascript">
  Cufon.replace('h1');
</script>

or

<script type="text/javascript">
  Cufon.replace('h1')('h2')('blockquote');
</script>

Alternately, if you’re using a JavaScript framework such as jQuery on the site where Cufón will be used, Cufón will take advantage of that framework’s selector engine such that you can call out specific selectors like this: Cufon.replace('#nav a').

Or, if you’re not using a framework, you’d reference these selectors using traditional (i.e. longer) JavaScript:

Cufon.DOM.ready(function() {
  Cufon.replace(document.getElementById('nav').getElementsByTagName('a'));
});

Step 5: In your CSS file(s), modify any text replaced by Cufón the same way you would any other text — color: #333; or font-size: .87em; or text-transform: uppercase; and so forth.

And that’s it. It really is as simple as that. Cufon is currently supported by IE 6/7/8, Firefox 1.5+, Safari 3+, Opera 9.5+, and Google Chrome. (See the documentation on GitHub for additional help, usage, and troubleshooting.)

Cufón Test Pages

Returning to the Cufón test pages I mentioned earlier, thumb through some of the samples to see FF Kievit Pro, Bickham Script Pro, Calgary Script, and Garamond Premier Pro rendered using Cufón.

Testing Bickham Script Pro with Cufon
Testing Calgary Script with Cufon

Additionally, Cufón allows you to specify the units per em for which your typeface is rendered. a A lower value (e.g. 64 units per em) results in slightly better performance and smaller file size, but at the cost of rendering accuracy. On the unit quality test page, notice how poor the letterforms look at 64 units per em, compared to 256 or higher:

Testing unit quality with Cufon

Drawbacks Compared to sIFR

It’s worth pointing out Cufón is an emerging technology, though it is quickly evolving and improving. Because of this, there are several known issues or deficiencies, which include the following:

  • No text selection. This is a big one. Currently you can’t select the text to do something simple such as copy and paste.
  • No a:hover state. Update: :hover is now supported.
  • Older PostScript fonts on Mac OS X aren’t supported. This is a weird one, honestly. However, you can convert these files into a compatible format using these instructions.
  • Letterform fidelity may be inferior to sIFR. Adjusting the units per em may overcome this. So far in my tests, letterform fidelity has been sufficient for what I need.
  • Typeface information (files) may be easier to thieve than with sIFR. See next section.
  • Other known issues I’ve not listed here.

EULA Licensing and Security

As of this writing, I’m in talks with type foundry FontFont, type vendor Veer, and Cufón creator Simo Kinnunen working through EULA (end-user licensing agreement) and security issues related to Cufón. There is a need to better understand what may be required by Cufón and its users to comply with type foundries’ licensing — or what alterations type foundries may be willing to make to their licensing — to allow for font embedding technologies such as this.

The main concern from the perspective of the type foundry appears to be that the typeface script generated by Cufón could be used to reverse engineer the very typeface itself. Further, because this script is a simple JavaScript file, it’s readily available to anyone for copying and downloading. The counter argument here is that the script generated by Cufón results in a proprietary format that no current software can make use of, except Cufón itself.

The good news? Our talks have been very positive thus far. Technologies such as this encourage the use of typefaces other than the standard set we’re all used to (Arial, Georgia, etc.) inevitably could increase the demand for typefaces. Therefore, type vendors and foundries have a vested interest in seeing @font-face, Cufón, and similar technologies flourish. Additionally, Simo Kinnunen is ready and willing to make adjustments to Cufón as needed.

Optimism on the Horizon

All things considered, I’m extremely optimistic about Cufón. I’m hopeful we’ll be able to work through licensing and security issues such that all of us can use it freely in our projects. I’ve already got plans for it in a project I’m currently designing using FF Kievit Pro, only a coded snippet of which I can show for now:

Testing Cufon with an actual project

This site is expected to be translated into at least 10 languages, so you can imagine why Cufón could be a big advantage over traditional image replacement.

So, give Cufón a try and join in the discussion. You just might end up a sIFR defector, too.

Special thanks again to Simo Kinnunen and Jason Santa Maria for bringing me up to speed with Cufón.

 

86  Comments

Veer Veer: Visual Elements for Creatives.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.

1   Kevin Quillen ~ 19 March 2009

What are your thoughts on FLIR?

http://facelift.mawhorter.net/


2   Daniel Ott ~ 19 March 2009

Great writeup, Cameron

Just wanted to drop a line and say that he enabled :hover support this morning: http://tinyurl.com/cte8sv

Cufon is very awesome, and thanks for being the guy that deals with all the licensing headaches(:


3   Kyle Meyer ~ 19 March 2009

I’ve been itching for more ways to push web typography further in an efficient manner. As you said, sites in multiple languages just aren’t good candidates for standard IR.

Since I’m lucky enough to have a designer based audience on a few I’ve begun specifying common designer typefaces at the top of my font-family font stacks. But the rendering between operating systems and browsers is still quite poor (resulting in the need for OS detection to prevent illegible type—which I’ve yet to write).

Best of luck with sorting the licensing agreements out, I’m anxiously awaiting the next leap forward in web typography.


4   Ryan Merrill ~ 19 March 2009

Thanks for the writeup, Cameron. It’s pushed me over the edge to try Cufón over sIFR for my next project.

I love sIFR, but it is a little difficult to setup. And anything that speeds up the design and development process is definitely a help.

Do you have any information on how the speed/bandwidth compares to sIFR? I’m guessing loading pages with Cufón text is less intensive than with sIFR.


5   Jeff Claeson ~ 19 March 2009

Excellent write up and a nice primer to using Cufón. I’ve used it once as a test already and pan to use it the near future on some projects.


6   Tim Merrill ~ 19 March 2009

Thanks, Cameron. Nice overview.

I’m curious to know what the browser performance impact would be using many instances of Cufón on a screen at the same time, vs. SIFR (which needs to be used very sparingly).


7   Cameron Moll ~ 19 March 2009

@Kevin Quillen Hadn’t heard of FLIR until now.


8   Jason Head ~ 19 March 2009

I loved Cufon from the moment I tried it. I previously used sifr in a number of projects but it always seemed so testy to me. It really was a bit of a pain to set up - but I digress.

Cufon was *simple* to set up - and It even seemed a little faster. it’s very *sharp* too - I’m not sure how to explain it, but there is something about the way sifr fonts render that you can tell that they are sifr - there is a very very subtle fade.

I recently used sifr on a very large scale project, I was quite happy with it - but I ended up having to remove it because my creative director was not too happy with the way it was kerning our selected font. (But then again, that’s not something I could have fixed in sifr either.)

Either way - I’m a Cufon convert - my days of screaming at the sifr code on my screen is over!


9   Kevin Quillen ~ 19 March 2009

It’s not too bad… I heard of Cufón a couple weeks ago.. its up in the air for us whether to use FLIR or Cufón for a big client. I know I don’t want to use sIFR though, for the reasons mentioned.


10   Todd Budnikas ~ 19 March 2009

Cameron, regarding your upcoming project using FF Kievit Pro: does that font allow for usage in the EULA? I would assume so since you’re proposing it in the design, or else you’ll default to sIFR or other technology?

It’s easy to see which foundries are currently not legal to use, but the others that aren’t listed require trying to understand the language of EULA which are vague and confusing. I feel like Cufón is not yet a viable solution due to this. Do you know of any foundries that are supporting the use of Cufón?


11   Jon Dale ~ 19 March 2009

With regards to tweening using jQuery, I have found that cufon performs far better than sIFR. With sIFR, when I had headings animating, it was very jerky and in some browsers would only move the entire heading at the end of the tween.

Also, nice to read they just added :hover


12   Mike Rundle ~ 19 March 2009

Cameron, awesome article! I had only briefly heard of this technique previously but all your example pages really hit home for me. I think I’ll use this on my very next project.


13   Patrick Algrim ~ 19 March 2009

I think this is great. sIFR is somewhat difficult to set up too, and from what I have seen here, it’s basically the same process. Convert a face to a friendly format (SWF with sIFR, JS with Cufon), define the sources in the header, and then define which attributes to replace.

Seems great, and I prefer Cufon over flash font embedding because of the performance issues. Web sites with tons of sIFR on it has some serious issues on just slightly older computers.


14   Mike Metcalf ~ 19 March 2009

Just when I thought I had finally mastered sIFR implementation, the world has to go and show me the easy way.

Looks awesome, I can’t wait to try it out. Thanks Cameron.


15   Brian Hefter ~ 19 March 2009

Been waiting for this writeup to see your thoughts on the licensing. Doesn’t seem to be as problematic as I feared, and I’m looking forward to using Cúfon on one of my upcoming projects. My idea for helping prevent some of the reverse engineering was to deny any direct http requests for any of the related files… only allow direct referral from within the domain. Don’t know how well that’d work out but I’m going to try.


16   Gary Aston ~ 19 March 2009

I’ll be trying this when I get home!


17   Miles Tinsley ~ 19 March 2009

Great article. Thank you.

I was *literally* about to just start work on a new project using sIFR (to which I am a noob!), but this seems like a viable, more simple alternative despite being in its’ infancy.


18   jason ~ 19 March 2009

Quick question:

1. Someone else asked this - but is the performance better then using sIFR, how about compared to using images and text-indenting?

From what I could tell using your sample pages, it seems to be pretty fast.


19   Geoff Thibeau ~ 19 March 2009

So for someone who hasn’t used sIFR before, but was about to redesign his website with sIFR in mind, it might be best to defer to Cufon? I didn’t like the idea of having Flash on my site, but with so many users on YouTube, it’s hard to argue that my audience wouldn’t already have FlashPlayer installed.


20   Kev Adamson ~ 19 March 2009

I’ve been using FLIR and I’m impressed thus far. Although FLIR requires PHP and Cufon doesn’t.

Does Cufon allow rendering on to coloured backgrounds? What about file sizes and performance comparisons between Cufon and FLIR? If anyone knows this stuff I’m all eyes / ears :) A “Cufon vs Flir” post by someone would be lovely …


21   Hugh G. ~ 19 March 2009

Pretty exciting! If someone has the means, I would love to know how a screen reader does with this.


22   Andrew ~ 19 March 2009

This looks really interesting - definately going to give this a whirl.

I don’t feel the drawbacks are that serious given the current position of web typography. Not being able to copy and paste would sure be a ‘nice to have’, but for headings or taglines I think I could put up with this.

There is so much awesome typography available, I hope the licencing and security issues can be overcome and we can see much wider use of creative fonts on the web.


23   Beth ~ 19 March 2009

I actually was able to get a:hover to work. I combined a and a:visited into the same declaration, and then declared a:hover afterwards. Not nice structure, but it worked for me! (in IE too.)


24   Jesse Bennett-Chamberlain ~ 19 March 2009

Nice article Cameron and thanks for taking the lead on getting the discussion with different type foundries rolling.


25   Terry Sutton ~ 19 March 2009

Thanks for the great roundup. Keep pushing.

I for one would love to see some progress with that open letter to Adobe from a few years ago. I think that has the most potential. If Adobe would release just 2-3 new typefaces, it could completely change the face of type online.

Humble pardons for the pun.


26   Fredrik W ~ 19 March 2009

How about typeface.js? Sounds like the same thing (and with the same issues) http://typeface.neocracy.org/


27   Adam Polselli ~ 19 March 2009

Thanks for the write up, Cameron. I never delved into sIFR because everytime I did, the Flash component and complexities seemed to outweigh the actual results. I was delighted when I found Cufón and was able to install it in about 10 minutes. I’m using it for the page and post titles on my website. Loving it, and excited to know that improvements are coming.

I liked your point that type foundries are willing to work with these technologies because it would mean a higher demand for new fonts. Anyways, thanks for the work you’re doing to help all of this come to fruition!


28   Tim Merrill ~ 19 March 2009

A Twitter friend, @paul_irish, recntly did some benchmarking and is writing up a post. Here’s his 140-character summary:

just spent today benchmarking siFR vs Facelift/FLIR vs Cufón vs typeface.js. sifr loses on config time. facelift fastest. cufon easiest.

http://twitter.com/paul_irish/status/1323527433


29   Jose Espinoza ~ 19 March 2009

Thanks for the writeup! I’ve been researching this since JSM twittered about this and have been meaning to implement this in my own site and now have a good clarification on the best way to do it!


30   Chris Robinson ~ 19 March 2009

Thanks for the great write up, a buddy of mine sent me a link to Cufón earlier this week it looks like a nice alternative if they fix the slight drawbacks compared to sIFR you listed.


31   A.Fruit ~ 19 March 2009

So… Cufon uses SVG then. (via the Github explanation)

I didn’t know Scalable Vector Graphics were supported in all those browsers.


32   Matt Wiebe ~ 19 March 2009

@A.Fruit: The documentation could use a bit clearing up, but it uses VML for IE and the canvas element for Mozilla and WebKit. Apparently SVG performance is too poor.


33   Eren Emre Kanal ~ 19 March 2009

Cameron, thanks. That’s a great and detailed article.

I wrote something like that. sIFR vs Cufón.

http://www.erenemre.com/2009/03/cufon-vs-sifrwhich-one-is-better/


34   John Dowdell ~ 19 March 2009

Here’s another recent way to help browsers with basic typography:
http://www.webappers.com/2009/03/10/rendering-text-with-javascript-canvas-and-vml/

(Google video sites had about 100M unique visitors in January, while completed Player installs that month were a significant multiple of that. It’s the total ecology.)

jd/adobe


35   John Faulds ~ 19 March 2009

I took a look at Cufón when you Tweeted about it a while back and was pretty impressed at how easy it was to set up. I tried replacing sIFR on a site I’d recently completed but unfortunately found some limitations with it (other than the :hover) that meant it couldn’t recreate what I’d been able to do with sIFR. But will definitely be looking at it again in the future.


36   Patrick ~ 19 March 2009

This sounds like a staggering waste of engineering effort and make me very glad I don’t have to deal with requests for style over content like this. OTOH, great writeup!


37   Rebecca ~ 19 March 2009

Thanks for the detailed writeup & examples. The only problem I can see is that with CSS disabled / JS enabled you get the replaced text repeated. Perhaps this would be relatively easy to fix by tweaking some JS tho!


38   Luke ~ 19 March 2009

Having tried FLIR a couple of times (albeit WordPress plugin version), it’s good if you have non-js users.

But I’ve just started playing with Cufon and it rocks, even better than Typeface JS which is similar and also worth a look.

I love Helvetica/Georgia, but after using it on every site for so long..zzz…


39   Mike D. ~ 19 March 2009

Interesting stuff. Even having created sIFR, I dream of the day when it’s absolutely, positively not necessary anymore.

Believe it or not, a friend of mine has actually created a method to render custom fonts using nothing but CSS. No javascript, no Flash, no plug-ins, and no .eot files. Just plain CSS. It’s nuts. Not sure what his latest plans are for release, but it’s crazy.


40   Nathan ~ 19 March 2009

And cufon works on the iPhone (and android I suppose). That makes it a winner to me.


41   Rob Morris ~ 19 March 2009

I’m simultaneously excited and slightly concerned by this.

In a strange way, one thing that was sort of good about sIFR was that you kind of had to know what you were doing to use it.

On one hand I think of the flexibility something like Cufon will provide in making my life easier as a designer. On the other, I think about this sort of flexibility in the wrong hands and I see fields of Papyrus.


42   Mike D. ~ 19 March 2009

I wonder a bit about the name too. Is it NOFUC (N.O. F.lash of U.nstyled C.ontent) backwards?


43   Olli ~ 19 March 2009

Great article, Cameron! Really helped a lot to implement Cufon or actually giving it a try in first place. Thank you!


44   philippe ~ 19 March 2009

There is one small problem with Cufón, based on your test pages: it doesn’t work with IE 8 in standards mode. :-(
(tested with the IE8 version that ships with Windows 7beta). Forcing IE8 to go in IE7 mode ‘solves’ the issue.

That said, Cufón is an awesome step towards better typography on the web. The goal remains @font-face though. Licensing issue aside, both Gecko (Fx 3b3) and WebKit (Safari 4b) perform very well on OS X & Linux (only tested Gecko). On Windows there are still a bit of issues, especially with Open Type fonts.


45   B. Moore ~ 20 March 2009

The text IS selectable in IE.

Go figure????

:(


46   Matthew Turner ~ 20 March 2009

3 Random Benefits of Cufon over sIFR.

#1 In my tests, download + rendering is faster than sIFR

#2 Memory usage. Ever notice what having multiple flash player instances does to the memory footprint of your page?

#3 Drop-down menus in Internet Explorer. Despite using wmode transparent + z-indexing. If you have a drop down menu going over a sIFR headline in IE, the cursor turns to the text selection tool as you roll over it, instead of the pointer which it should be for he link. Doesn’t happen with Cufon.


47   Osvaldas ~ 20 March 2009

Cufon seems to be pretty hard-cored way to embed custom font to a website. Anyway, how can argue that sIFR is not hard-cored solution too? That’s just a discussions object. However, I believe the most of developers will be cautious to use Cufon until it gets text selection feature implemented, which I think is going to be a huge challenge for programmers. But, a good start is half a job done - let’s see how it goes in next few months!


48   Joren Rapini ~ 20 March 2009

Thanks Cameron, you’ve inspired me to write a post about all of these different text replacing techniques that are out there. This one is new to me.


49   Corby Simpson ~ 20 March 2009

I “wonder” if sIFR or any other forms of font replacement could benefit from a Flash file which is a container which would import the particular font-face which through a stringVariable called Helvetic.swf or Frutiger.swf. From there, the flash container could embed the font as easily as sIFR?fontName=helvetic.swf which would allow access to the font-faces? Perhaps a resource where these swf’s are located which represent a wide variety of the fonts that exist, it would allow people sans Flash to still work with the embedded fonts…?


50   Richard Fink ~ 20 March 2009

Has anyone checked out True Font Family?
http://www.truefontfamily.com/
It’s an automatic text-to-image replacement method that looked quite good to me when I ran into it a few months ago.
But back to Cufon:
The text selection problem, I think, can be solved with a little added Javascript. My thought is that onclick or onselect, the underlying text can be retrieved and either superimposed on top of the Cufon-generated “image” (it’s not really an image, but let’s call it that) by using a font with color transparent to simulate selection or just copy the underlying text to the clipboard in some fashion.
Not a deal-killer, I don’t think. And enabled Javascript is necessary for any of this to work, anyway.
BTW - The same problem exists with the use of soft-hyphens. Selecting the text is no problem but the hyphen char travels along and shows up on paste.
Thanks for this! At worst, very interesting, indeed.


51   John Dowdell ~ 20 March 2009

Say Cameron, you may be interested in this too… Veronique Brossier has a very accessible intro to the new text layout engine in browsers using Adobe Flash Player 10:
http://www.insideria.com/2009/03/flash-text-engine.html
http://labs.adobe.com/technologies/textlayout/

Check out the examples… shows classic text layout options. It’s new tech, still in Labs… I haven’t seen anyone drive it from JavaScript yet, but most browsers should be able to do so.

Consumer support requires Adobe Flash Player 10, released Oct15’08, measured at 55% consumer support mid-Dec, now probably about 80%. It’s What Your Browser Can Do Today…. ;-)

jd/adobe


52   Nasar ~ 22 March 2009

sIFR,FLIR…and now Cufón. Thanks Cameron for these details. Will give a try. Now we can go further with web typography.


53   Esben Thomsen ~ 22 March 2009

@Cameron you might be interested in a small Mac OS X plugin called “ClickToFlash” to speed up your browsing. Works in all OS X browsers and therefor a universal plugin.

Personally Im still waiting for a @font-face solution, but it seems to be a good solution for now


54   Tim Wright ~ 22 March 2009

Do you think the download time of all those images and JS are worth the benefit of having a neat font?


55   Martin ~ 22 March 2009

You may also wish to take a look at what is known as typeface.js

http://typeface.neocracy.org/

Does pretty much the same thing, and I think it’s pretty much hit the same roadblocks as Cufon


56   Sachin ~ 23 March 2009

Thank you for making me aware of Cufón..it is so useful for me thanks once again


57   Pat Anzanello ~ 23 March 2009

Did anyone try it in a blogspot blog? I’ve had sucess using Typeface.js but not Cufón… Any advice?

Thanks


58   Martin ~ 23 March 2009

Pat, I use Typeface on my website but I use it only for the headers.

It does allow for highlighting of text - but you won’t see the text highlighted. If you do a ctrl-a or highlight text before and after it will work.

It’s also very easy to use. I’ve tried to figure out sIFR many times, but I can never get it to work. Typeface.js works for me.

I’ll be looking into Flir and Cufon and see how they differ and are the same.


59   Martin ~ 23 March 2009

Sorry Pat,

I misread your post. I thought you were asking if anyone has had success with typeface.

Please ignore.


60   Mariusz ~ 24 March 2009

I use Cufon on my blog and few personal projects and I’m quite happy so far. Only problem I noticed was that it wasn’t working with jQuery selectors when jQuery was in no-conflict mode. Luckily, I reported this and was fixed quite soon.

Anyway, good piece of library.


61   Billee D. ~ 24 March 2009

Thanks Cameron! This definitely looks like a promising technology. Being a web designer and also a graphic designer who loves type is not always a good fit. Things like sIFR and Cufón help me to turn a good design into something much better.

Hopefully type foundries understand the value in something like this and will be willing to work with you, Simo, and JSM in revising their licensing for this kind of application. Bravo! It would be so nice to actually use real type easily on a web page.


62   Travis Anderson ~ 24 March 2009

Cufon is exciting to me, mainly for use with the iPhone. Fonts look better than with FLIR. Regarding sIFR, I never found sIFR that difficult or complicated to use, I think it works great as long as it’s not used repeatedly on a super long page where too many replacements occur (50+). If you’re at all thinking about using sIFR in your project, just make sure you’re using sifr 3, and you’ll be good…easy implementation, and many more features.


63   Jean-Marc ~ 24 March 2009

Great article, thank you. I am in the process of implementing cufón for all my web development. No more boring fonts, supported on iPhone, yoohoo! I’d just like to mention a few discrepancies between browser, eg “#tag_id h1” will work on Safari, but not on the other browsers. The “a” combinations are still giving me headaches, but globally I am really happy to support this creative approach. One more thing, I noticed this morning that cufón has been updated, and it is noticeably faster (check the comments 2008 to 2009). Simo, this about adding the version in the header ;)
Read you later.


64   Richard Fink ~ 25 March 2009

 WHILE EXPERIMENTING with Cufon and checking the results in IE it suddenly hit me that what I was doing made absolutely no sense.
 IE has supported @font-face for 10 years using the compressed EOT format. Subsetted EOT font sets can be created using Microsoft’s WEFT tool. It’s not greatly user-friendly but you only have to do it once. (It is also domain-specific.)
 In IE, this not only avoids all the problems listed for Cufon and Typeface.js but the text can be scaled with IE’s Text Size menu, as well. A scriptless solution.
 What’s needed is a switcher that feeds the Cufon alternative to the browsers that need it.
 Just a thought…


65   Carissa ~ 26 March 2009

Richard, you can use conditional comments for IE to feed only IE the code it needs, and the other browsers the cufon code.

I used cufon on a site a few weeks back so I’ve been anticipating this article. The one thing I don’t like about it is that replaced text is a mess with CSS turned off. I looked at typeface.js and it doesn’t do that so I wonder if that’s a better alternative? At this point in the development process, they probably both have their own issues…it will be interesting to see which emerges as the “winner”.


66   Richard Fink ~ 26 March 2009

@CARISSA: THE WAY I SEE IT, typeface.js and Cufón prove that the basic technique works acceptably. Like Cameron, I’m very encouraged, this looks like the way to go. Finally.
 There are some rough edges, but I’m not seeing any­thing that can’t be worked out with a little ingenuity.
 Both sites have forums where users can post about problems like your experience with CS styles off.
 (Thanks. I’m going to check that one out.)
 As far as using conditional comments - usually they are used to reveal stuff to IE. Here, I need to both reveal stuff and hide stuff, without also hiding what’s hidden from other browsers as well so I’ve got to look closely.


67   ~ 27 March 2009

Richard, You can use a conditional comment to hide stuff from IE too. The original code provided by Microsoft doesn’t validate, but this one does:

<!—[if !IE]>—>
your stuff here
<!—<![endif]—>

So you can use conditional comments to feed IE what it needs and hide what it doesn’t.

Apologies to Cameron for getting off topic.


68   suBi ~ 30 March 2009

My boring wisdom:

I think Cufon has the potential to become awesome!

I tried to do a page on Typograhy in band-names, and got stuck right after the first awesome transformation. How do you embed two fonts and utilize them? Have you ever tried that with cufon? or is it just limited to one font per page?


69   Moataz El Wesimy ~ 31 March 2009

here is another try with arabic,

i have tried to include all characters while i was generating the font js file

and the result was abit better, see example below
http://www.wesimy.com/cufon/

the cufon still renders the font as LTR which i believe that it could be handled in the next release, also they may need to keep in mind the complexity of arabic letters.


70   Harlequin ~ 31 March 2009

As Richard Fink said about @font-face in IE has been true, and Microsoft has been trying that long to get other browsers to support. Bill Hill of Microsoft touches upon the subject a bit more in this Channel 9 video I recommend you watch: http://channel9.msdn.com/posts/Charles/Bill-Hill-Digital-Democracy-and-the-Declaration-of-Digital-Independence/


71   Çiçekçi ~ 05 April 2009

Great article, yes think Cufon has the potential to become awesome!


72   atommedia ~ 10 April 2009

If this hooks on and is pretty easy to implement then it will be really refreshing to see a broader font base on the web. Brilliant stuff!!!


73   Michael Kozakewich ~ 10 April 2009

I made a test page after reading this, and they seem to support copy/paste, now. Only in whole words at a time, but who copies half a word?

I also use PHP includes, and had a couple comments inside, and the test page added those comments as text for no good reason. I’ll have to look into that a bit.


74   Indranil ~ 12 April 2009

I recently used Cufon on a site for a client, and was very pleased with the result, _and_ the time it saved over Flash. Now I can finally get rid of the Flash Pro that’s eating up space on my hard disk and does nothing but a couple of odd sIFR-ing once a month..


75   Andy ~ 15 April 2009

Nice article, I recently did a comparison of sIFR, Cufon and Typeface.js. For my needs Cufon definitely came out on top.

One point about text selection, In most browsers I think you can select the text. Only you have to do it blind, in that the cursor doesn’t change and nor does the background color. However if you copy whole chunk of text the Cufon text does appear when you paste. Obviously improvements would be nice!

http://thatguynamedandy.com/blog/text-replacement-comparison


76   Jesse Wallace ~ 15 April 2009

Cameron, excellent article, I didn’t even know what Cufon was, totally killer, all excited again about css. Thanks for the tips, I am going to try to incorporate it into my next website design.


77   Chris Greenhough ~ 16 April 2009

@suBi: yes, you can. I scratched my head over this for a while, but it’s actually very easy. You can include as many separate font (js script) files as you like in the head tag, then reference them like so:

Cufon.replace(‘h1’, { fontFamily: ‘Lovely Font’ });
Cufon.replace(‘h2’, { fontFamily: ‘Different Font’ });


78   Steve Yakoban ~ 24 April 2009

Does any know how much control there is on adjusting a replaced font from it’s default, like stretching it vertically? Did I also see that you cannot control word spacing?


79   çiçekçi çiçek ~ 27 April 2009

Cameron, excellent article


80   ~ 09 May 2009

“No text selection. This is a big one. Currently you can’t select the text to do something simple such as copy and paste.”

Yes you can, you just can’t see it


81   Pradeep CD ~ 24 June 2009

Great tutorial…it worked for me… thanks…


82   Don ~ 25 June 2009

I’m trying Cufon out, and it works great - but I am having one small issue.

I have a UL-based CSS/JS menu. On page load, I check a querystring to see what the current submenu item is, then use some JS to set the color for the current item to a darker color. There is also a CSS hover state applied to the text. It works fine with Cufon off, but when I turn Cufon on for the element (h4, in this case), the text remains the original color until I mouse over the text - it then switches to the proper color.

My linked stylesheet is first in line. I have also tried calling the “selectedItem();” at the end, after the cufon.now(), but the same thing happens regardless. Anyone have any ideas?


83   tadilat dekorasyon ~ 27 July 2009

I have a UL-based CSS/JS menu. On page load, I check a querystring to see what the current submenu item is, then use some JS to set the color for the current item to a darker color. There is also a CSS hover state applied to the text.


84   dekorasyon ~ 27 July 2009

Regarding sIFR, I never found sIFR that difficult or complicated to use, I think it works great as long as it’s not used repeatedly on a super long page where too many replacements dekorasyon işleri occur (50+). If you’re at all thinking about using sIFR in your project, just make sure you’re using sifr 3, and you’ll be good


85   Karsan Nakliyat ~ 31 August 2009

Hi … I’ve used it once as a test already and pan to use it the near future on some projects..


86   Roc ~ 18 September 2009

Tyepkit is coming… http://blog.typekit.com/




About

Authentic Boredom is the platitudinous web home of Cameron Moll, designer, author, and speaker. More…


Jobs
Come in, we're hiring

Full-time and freelance job opportunities. Post a job...

...view all jobs »


Recently

A selection of fine reading, available for a limited time only:


In Print

CSS Mastery CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.

Mobile Web Design Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.


Recommended

Letterpress Posters Letterpress Posters The unassuming beauty of a freshly letterpressed print.

Wicked Worn That Wicked Worn Look. Techniques for that worn, aged, distressed look.

Mister Retro Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.

Blinksale Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.

Basecamp Basecamp My preferred web app for internal and client project collaboration.


Speaking

HOW Conference HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.

Web Design World Web Design World Seattle, July 20–22. Practical sessions on web design.

An Event Apart Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.


Feed Me
Articles: RSS
Linkage: RSS

Follow me: Twitter