Custom fonts using Cufón

If you’ve worked with webdev professionally you know how it goes. “Why can’t a company with a strong visual brand get to use their own font?”, the designer asks. Then a long discussion about web fonts follow, where you decide to replace the font with a “web safe” font instead. Or do you?

You could think it’s strange that in 2009, we can’t use any fonts we want on the web, and I would fully agree. You could ask whose fault that is, and I would reply with a quote from a meeting between browser makers in august 2008:

“My understanding, from Chris, is that supporting direct linking of the fonts would be a great disservice to the independent font industry. A high-level decision within MS says we won’t implement that in IE. So what is done other than EOT is [probably] not going to interop with IE. “

“MS” is of course Microsoft, and “Chris”, is referring to Chris Wilson, Platform Architect of the Internet Explorer Platform team. The same Chris has also written a longer text about font linking on his blog. I first thought that this was something the font foundries had pushed through, but on the above post it seems that this is also a personal opinion. Browsers (but only IE) need to protect fonts from getting pirated.

And that’s the whole reason why we don’t have cross-browser fonts on the web today. (Although direct linking to fonts work in all the latest versions of Firefox, Opera, and Safari). Nice isn’t it?

Embedding fonts anyway

Of course, there’s still a need to embed custom fonts on webpages. That means clever developers will develop techniques will work around a broken internet explorer. No matter what the font founderies and Internet Explorer team thinks.

My reasoning for why this is a good thing is because that’s how everything else works in the browser. Even though anyone can copy an image, we have a big market for stock images. Even though anyone can copy the HTML, CSS, and Javascript of a whole site, we still have people building websites for money. Fonts are no different, and the exact same business model that works for stock images can work for fonts.

One popular technique is sIFR, a way to use javascript to replace regular html with flash. Inside the flash you embed the font you want, and voilá, you can use any font you want. sIFR misses one crucial point though: It’s far too annoying to embed a font inside a flash movie. You need a commercial program, and you need to know what you’re doing. And you’re dependent on flash support. It’s not that bad, but a bit annoying to work with.

So for a recent project I’ve been playing with Cufón, which uses javascript, but draws on canvas, or in VML for browsers that don’t support canvas (IE). They have an extremely friendly website, which walks you through the process of getting things to work, and the font conversion needed is available directly on the website. I’ve only used it for simple cases, but it works really well.

All in all, Cufón is a great alternative until IE gets its shit together.

PS. Famous people that don’t agree with me:

  • Richard Rutter, author of the clagnut blog suggests that font founderies server-side generate our fonts on demand, much like Google Maps only sends a part of the map, and not all of it.
  • Joe Clark: “Quite simply, there is no broad clamour among Web designers to use any font they want.”
  • Jason Santa Maria: “embedding normal typefaces without any sort of precautions is putting it on a silver platter for anyone to take freely. That’s like saying people steal from stores anyway, so let’s just leave the doors unlocked at night :)”
  • And of course, the IE team…
  • …and all the typeface makers in the world.

14 responses to “Custom fonts using Cufón

  1. Thanks for this recommendation. I have never used custom fonts in the past and I really want to stay away from Flash. I checked some demos with Cufón and it is looking good. But one usability drawback I see directly is confusion when you want to select text with the cursor …
    Try selecting the bottom example text:
    Comments on that?

  2. @Jim: That’s how it works. Firefox thinks it’s rendering an image, not text. So it’s not selectable. It’s certainly not a perfect solution, but it’s good a compromise for the moment.

    Maybe you could work around that issue by figuring out why people are selecting your text? And make that task unnecessary. Do they want a title for their tweet? Then make tweeting your stuff easier instead.

  3. Ah, that’s explains it. It actually is selectable (I tried) but it looks like it is not.

    As for me for example I usually select main headings of articles to use as anchor texts for links which I use for sources at the bottom of my articles. Yes, Twittering would be another example. Another example is delicious in which you perhaps copy and paste a certain sentence or two.

    Well, I would not really recommend it but for logos or such I guess it would work fine.

    Actually people should not forget to style it with CSS as well for those that don’t read JavaScript as I guess without JS it will just be a plain h1 or whatever element used.

  4. When I reviewed Cúfon a couple of months ago I too noticed I was unable to mark text. Images are better in that area, since the alt text can go along in some cases (I do prefer Cúfon, though, since it still got more cons regarding progressive enhancement).

    I remembered having trouble with custom fonts on links too, but I could remember wrong.

  5. Yea, a lot of talk about this Cufón thing going round on Twitter recently. I’ll give it a try over the w’end – cheers.

    Agree with your logic. TBH I’ve never made a typeface, and until that day, once I appreciate the time and effort that goes into making them, I will have the attitude of take, steal, pillage unfortunately :[

    Perhaps if we get to the stage where everyone is taking, stealing, and pillaging the world might start making their own typefaces INSTEAD of stealing them.

    Good to see you swearing in your posts Emil, you’re human after all :P


  6. @Jim Westergren: The good thing with cufon is that it reacts to CSS styling. My example was for a logo, where half the text was red, and half was white. Wrapping a span around the first part and setting the color through CSS worked fine. So I would say Cufón encourages proper CSS styling too. Even setting a little padding on that inner span worked well.

    @Anders Ytterström: I’m using it for links, and it seems to work well. I know they recently added support for :hover styles, was that your issue?

    @Lewis Litanzios: About pirating fonts. Yes, direct linking would make it easier to do, just as easy as it is to steal an image. I can imagine discussions when the first browser came out, about images being easily copiable from the browser cache. Automatic piracy? Gosh!

  7. And that’s the whole reason why we don’t have cross-browser fonts on the web today.
    Seems to imply that it is all Microsoft’s fault. But as someone who has followed the debate about font-linking very closely, I’m puzzled as to how you came to that conclusion and not the other way around – that is the fault of the other browser makers to NOT implement linking to EOT in addition to linking to TTF and OTF files that is holding things up.
    EOT has been submitted to the W3C as an open spec. It has existed in IE for over ten years and is well tested. It is a compressed file format and therefore offers something TTF/OTF files do not.
    This whole problem is very easily solved. Simply support EOT alongside TTF and OTF. What’s wrong with that? In that way, browsers could support free fonts and paid fonts, too.
    The real problem seems to be that this approach does not make some kind of a political statement and does not “stick it” to Microsoft and allow you and others to offer an incomplete and knee-jerk interpretation that makes Microsoft out to be the bad guy.
    If I’m wrong, please tell me how.
    BTW – I’ve looked at Cufon very carefully. It’s a very promising approach to text-replacement. Developer Simo Kunnen has done a great job. By all means, check it out.

  8. This is interesting. I have heard of some different ways to use different fonts on your website, such as using JavaScript. But I have never heard of Cufón. Good to know. I’ve always been asked “Why can’t we use a different font?”

  9. @Richard Fink: I did not mean to blame Microsoft historically, just right now. All major browsers have implemented direct linking to TTF/OTF files. Except Microsoft.

    Even though you could disregard the terrible tools that exist to create EOT files, there are two solutions to cross browser fonts: Either everyone else switch to EOT, or Microsoft implement direct linking to TTF/OTF (or as you say, support both, that’s step two).

    That’s why I want to push Microsoft to act, it’s either them, or all the others.

  10. I fully agree fonts should, when readable, be free to use on the web. Companies nowadays use own fonts for their company name and they should be able to use that font when this is familiar to their customers.

    I didn’t know about Cufón. Thanks for the tip! Hope IE will get more sense in the future, they better do otherwise they will get pushed away by Firefox and upcoming Google Chrome. But I guess most FF users won’t leave a tear when IE looses some of their dominance. :p

    At the moment I’m busy trying to learn some Jquery for website effects, also to learn some first Javascript. Hope you’ll write an article about this some time, Emil!

  11. Awesome!! I have been using sIFR – and it is really slow – I will def give this a try.

    I am sorry – what were they thinking when they built the web. It is pretty darn funny that today with all the things that can be done, full screen video, rich media, animation – that we still are designing with verdana.

    sIFR is still too slow to replace body text – this should be job one for the web code overlords.

  12. We’re using CUFON on a new site. Working great, although be aware there is basic CSS that is not supported, e.g. text-decoration style for ALL IE browsers! This one threw me for about an hour before I reread the wiki. Also, once you start using selectors to identify specific elements/classes, browser support becomes less consistent. Still trying to get my “.use_cufon” class to render in IE!

Comments are closed.