Cuddling With Cufón
Posted by Kyle Weems on April 15, 2009I’ve been meaning to mention this for a while now, and have been noticing a few blog posts on the topic recently, so I think I’ll add in my voice. If you haven’t check out Cufon yet, go do so. And yes, I know the “o” is supposed to have an accent mark over it, but I’m not going to put the effort into that other than this post’s title.
What is Cufon? Cufon is a plugin-free, Javascript-powered alternative to rich font embedding. In particular, it’s a great alternative to flash-powered sIFR, which prior to Cufon was the best way to get rich font support during our long desert of poor font-embedding support that is the modern web.
By “great alternative”, I mean that it “lights sIFR on fire, kicks it into an open sewer, and laughs maniacally as sIFR rolls around in stinky, burning pain.”
Yes, it’s that much better. And if you don’t agree, I’ll punch you.
Ok, that’s not true. I’m opposed to violence. I also never learned how to throw a punch, and I’m worried that I’d break my thumb.
However, it is better. For three major reasons. 1. It doesn’t require you to own Flash to build the font file you’ll be using. 2. It doesn’t require a plugin in your browser to work (aka, it works on iPhones among other things). Lastly, 3. It’s way, way faster.
It’s things like Cufon that convince me that in the near future that Javascript will be the new Flash. (canvas and SVG make my pants tight in an embarrassing way.)
How does Cufon work? Simple.
1. Visit their site. Download the cufon script. Include that in the head of your page.
2. Get a font, and using their nifty generator, turn it into a .js file. (Supports several standards, including OTF and TTF.) Link that font script in the head of your page after the cufon script.
3. Do an air guitar riff. (Optional.)
4. In a script you add, include a command to the effect of Cufon.replace(“elem”) where elem is the element you want the font to replace. If you’re only using one font with Cufon, it’s as easy as that. If you’re using multiple fonts, you’ll need to do Cufon.replace(“elem”, “font name”), where “font name” is the name of the font you want that element to use for that element.
5. Look on in awe as the font are replaced so fast, your page will go slightly back in time.
An example of a finished result is right here. It’s simple, but it gets the point across.
Like sIFR, I can’t recommend using the font replacement on large fields of text. Selecting the text for copy/paste purposes is difficult (although not impossible), and it’s bound to have an impact on performance if you use it too widely. But selectively used it can open your projects open to a cornucopia of fonts (licenses allowing.)
What are you waiting for? Go get it now!
Tags: cufon, fonts, javascript, sifr
Actually, it’s not as good as sIFR in two ways (at least; I haven’t done tons of experimenting with it yet):
1. You can’t select Cufoned text like you can sIFRed text.
2. You can’t scale Cufoned text like you can sIFRed text. (Try zooming text [not the whole page] on your text page.)
I expect they’ll fix both these over time, but for the moment, there are ways in which sIFR is superior.
See, comedic rhetoric can never stand up to rational thought.
I hadn’t even noticed the text zoom issue, since pretty much all the main browsers do a full zoom now. I can’t see this impacting most people (who I presume will use the default zoom on their browsers), but then, I haven’t really studied user patterns for that kind of behavior to have a clue how right or wrong I am on that.
The text selection thing does bother me. If it’s just being used in headlines, the impact should be fairly minimal (you can select surrounding text around the Cufon block and get the Cufon text along with it), but for your average wall of text it could be really obnoxious (not that I think you should be using Cufon for a wall of text.) It looks like they’re planning on making this possible (http://groups.google.com/group/cufon/browse_thread/thread/affeef69c0bd648/705dc106180e79db), but sadly, I have no idea as to when.
Even with these problems, I think I prefer Cufon from a speed and no-plugin stance to sIFR. I’d prefer native font-embedding via something like @font-face even more, but thanks to all the usual piracy fears I doubt that most font vendors will even be ready to consider allowing it even once full browser support exists.
The text does copy when it’s selected. The problem is actually selecting it. If it’s mixed in with other text or you’re copying a whole page, say, then it works just fine. Trying to get an actual header by itself doesn’t work so well, unfortunately.
I’ve recently been tinkering with cufon and taking a look at the generated code it wraps the content in loads of spans etc, these are also seem to be done at the per word level so if you were to use it for main page headings this would be likely to increase the weight of the page.
Wondering what this would “actually” add to the speed of download if it were used throughout a site?
Any thoughts on this?
@Scott – The nice part is that the extra spans are being generated by Javascript, which means that they’re being generated on the end-user’s machine, not on the server. So although this may impact processing time on rendering the page, it won’t impact the download beyond that of loading the script files. It’s worth noting that by comparison to sIFR, the end-user processing time seems much faster on rendering the font.
[...] by Kyle Weems on CSSquirrel “Cuddling with Cufon” By “great alternative”, I mean that it “lights sIFR on fire, kicks it into an open [...]
Actually – I’ve seen the “can’t select cufon text” argument many times – it’s simply not true. You certainly *can* select cufon text, in any position, and just as easily as you can regular text. The thing is, you won’t *see* it being selected.
Usually, when you click-drag and highlight text to be selected and copied, it’ll turn “blue” so you can see it. With Cufon, you won’t see the blue – but it’s still selected. Go ahead and try it. It copy/pastes just like anything else.