Comments on: Custom fonts using Cufón

By: ben

ben — Wed, 26 Aug 2009 15:46:33 +0000

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!

By: Greg Bowen

Greg Bowen — Sat, 20 Jun 2009 22:34:26 +0000

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.

By: Jan Willem

Jan Willem — Sat, 23 May 2009 18:01:26 +0000

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!

By: Emil Stenström

Emil Stenström — Fri, 15 May 2009 16:46:52 +0000

Oh, and one more thing: Through HTTP-level compression (gzip) you can get almost as good compression of ttf fonts as with eot.

By: Emil Stenström

Emil Stenström — Fri, 15 May 2009 16:44:28 +0000

@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.

By: Cody

Cody — Thu, 14 May 2009 20:37:20 +0000

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?”

By: Richard Fink

Richard Fink — Thu, 14 May 2009 13:08:15 +0000

“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.

By: Anders Ytterström

Anders Ytterström — Sat, 09 May 2009 14:33:26 +0000

@Emil Stenström, ah, that’s right. Thanks, good to hear they’ve fixed it. :)

By: Emil Stenström

Emil Stenström — Sat, 09 May 2009 08:22:39 +0000

@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!

By: Lewis Litanzios

Lewis Litanzios — Fri, 08 May 2009 22:58:26 +0000

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

By: Anders Ytterström

Anders Ytterström — Fri, 08 May 2009 19:33:08 +0000

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.

By: Jim Westergren

Jim Westergren — Fri, 08 May 2009 19:20:34 +0000

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.

By: Emil Stenström

Emil Stenström — Fri, 08 May 2009 18:54:14 +0000

@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.

By: Jim Westergren

Jim Westergren — Fri, 08 May 2009 18:49:28 +0000

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:
http://www.cameronmoll.com/articles/cufon/
Comments on that?