Cufon vs sIFR vs FLIR

Nice Article, I did a bit of a comparison between sIFR, Cufon and Typeface. Cufon worked pretty well for me but like you say the copyright violation is an issue. Typeface.js was a little stricter on this and wouldn’t let me embed the font unless I had the rights. Unfortunately Typeface didn’t like the kerning on my custom font.

Thank you for this round-up. A small item though. In the eyes of foundries using sIFR does still violate many EULAs as many foundries do not allow for embedding in this way.

I really don’t see the legal difference between sIRF and Cufon. Using Cufon the font is not embedded, but only drawing instructions which is pretty much the same as the sIFR method.

Excepted for text selection Cufon seems reasonnably good.

Few thoughts of mine after reading the article:
1. The main disadvantage of SIFR IMO is that it’s flash. Sometimes it takes a while to adapt flash object / css so layout looks well. Some more sophisticated operations / solutions would be also almost impossible to implement using SIFR.
2. You are able to select FLIR’ed text, however only whole header. It is problematic if you replace using FLIR whole paragraph, but be honest, who would do that?
3. IMO the biggest advantage of SIFR is that one is able to manipulate the font from inside of .swf pretty well. Its easy to add shadows or apply custom antialiasing. However as long as you do not need those, FLIR is obvious winner for me. Unfortunately, I have never heard of Cufon, but I will have to try it soon.

I’ve found it very difficult to control line heights with sifr.

Cufon *does* support selection in most browsers, but it suffers from an odd quirk: You can’t “see” the selection as highlighted. Try it though: select-copy-cut-paste works great in Firefox and reportedly in other browsers as well. Although it’s possible to fix this in the Javascript (“just” change the color of the background) it’s probably not worth the code bloat in most instances, so it should probably be optional if ever implemented.

This makes Cufon, in my mind, perhaps the best of the solutions out there.

The *real* problem, though, is the fundamental conflict between our need to use any face on any web page anywhere, and many foundries’ insistence that they get paid on bizarre usage terms. This is at heart a DRM battle, and technology and need will carry the day here, as they have with other media.

I’m really not sure why sIFR gets a free pass here on the “legality” issue – Like Cufon and others, it transforms a typeface, and then freely shares that transformed version as a sIFR font file that can be easily downloaded, and (in most cases) re-used elsewhere. (I confess to snagging others’ sIFR fonts to avoid the PITA of making them myself (I don’t own Flash). How could that be wrong if I already own a copy of that font?) How is this *legally* any different from Cufon? In other words, what gives Flash users special immunity w.r.t. font use – just Adobe’s clout and Flash marketing muscle? The real problem seems to be font licenses that are badly out of step with the realities of market need.

BTW, Any system that just transforms the original vector data would seem to fall into the same category. FLIR is fundamentally different because it flattens the vector (outline) text to a bitmap, but this approach has many drawbacks, including reliance on external servers for proper rendering (and performance), inability to dynamically scale locally, etc. Interestingly, in the case of Flash, the font info isn’t even transformed, it’s just put into a magic Flash wrapper. This whole situation is crazy….

@Sabre: I totally forgot to mention the drop shadows and anti-aliasing advantages of sIFR, those are some of the main reasons why I prefer sIFR, I will have to add those to my article.

@Dub: I agree that the legality issue of sIFR is a bit unfair, but it IS due to the power of Adobe and rights of use within flash. But as stupid as it may be, I’ve heard there have been lawsuits due to this technicality.. people will do whatever they can for an extra coin in their pocket.. especially typeface owners, they even outsource firms that specialize in searching for copyright violations. Not a path you want to travel down.

Overall I agree with many of you that sIFR is very frustrating to work with, as it doesn’t render properly in some cases and doesn’t follow a very strict styling model with CSS. However, there are simply too many legal or usability issues with the other typefaces that I simply cannot ignore. Thank you for your valuable feedback, I hope you continue to share.

Clay, I think the fact that you consider sIFR to be subject to fewer legal issues comes from a lack of understanding of the SWF format. With sIFR you are still embedding a converted version of the font, it can still be decompiled, and the font can still easily be extracted.

Cufon and sIFR equally (il)legal; they are in fact precisely the same technology. I’m not going to make a judgment as to whether they’re legal or not, since I’m not a lawyer, but there is certainly no separation between them on the legal front.

I recently used Cufon on one of the websites I made. Got a few problems with it (.font.js was kinda bugged and some of letters had like 2000px spaces after them, but I somehow figured out in compressed .font.js which variables are responsible for that and managed to fix .font.js file on my own).

For sure it is nice and fast solution (of course .font.js files are big (20-100kb) but they load before element so layout does not hurt because of long loading time like when using FLIR or SIFR). However I don’t know if I will use it often. It is somewhere between FLIR and SIFR in css-layout impact and styling possibilities. Like FLIR, it has no option to change Antialiasing. Don’t know if it supports effects like shadow or blur (easily available in SIFR and also in FLIR with additional mods). An obvious disadvantage is that Cufon does not support text-align:justify!

So, the truth is that one should choose between SIFR, FLIR and Cufon depending on given layout. Thats all.

I’m working on another web font solution, currently called Fontwebula. It will surely break copyright, BUT my business plan calls for licensing/selling commercial fonts and well as using freeware fonts (there are tens of thousands). In a great many cases you will be able to find a freeware version that is close/identical to the commercial version.

I will attempt to launch my new webapp, OCD, at the TechCrunch50 this year and I will be displaying several webtop publishing tools as well as fontwebula.

Cufon is SEO friendly, see getfamous.biz/…/cufon-a-compromise-between-design-and-seo/

Chance:
That sounds nice. I wonder which tools will you use in your solution, since the most common (and any I can think of) are already used: JavaScript (Cufon), Flash (SIFR) and server-based image generator (FLIR).
IMHO two most important factors are:
* CSS manipulation – how can I manipulate the result using CSS (this is tought in all solutions described here)
* Effects – your solution should be able to generate simple shadows, change antialiasing and support hovering and links.
I wish you good luck!

Duncan:
Cufon is as friendly as FLIR and SIFR as they all use same technique – DOM Element Replacement. They all are launched using JavaScript after webpage is load.

In looking for information on these different types of font replacement, I always see people worrying so much about SEO. Unless I’m totally missing something I don’t see how sIFR or Cufon (haven’t used FLIR) could affect SEO at ALL. If I recall correctly the only thing the search engine web crawlers do is read the HTML of the page (within tags) and with these replacement (this is the keyword here) techniques, the only thing it’s changing is the visual display of that HTML and not the HTML itself. All of them even use techniques of (mostly) unobtrusive Javascript, another plus for SEO.

So on that note, again I’d like to know how these could *possibly* affect SEO.

@Jeremy, right you are my friend, when i wrote this post, FLIR and Cufon were both using techniques that did not degrade to clean markup (FLIR used actual images with alt tags for each letter, and Cufon used markup the rendered the markup unreadable to crawlers that support javascript). I have updated it to reflect the fact that all three of these solutions are SEO optimized now.

Looks like Cufón does support hover (since March).

Furthermore, I am able to select text rendered by Cúfon or FLIR. Like Jeremy says, these techniques do not change the HTML itself, so the text is still there. Or did you mean something else when you say thatText cannot be selected?

Hey, stumbled upon this article while I was searching for reviews of Cufon. I know the focus of this article really isn’t @font-face, but this statement is a bit misleading:

“Internet Explorer 6-8 do not support font-face”

@font-face has been supported since IE4. IE only supports EOT fonts, not TTF or OTF, so you have to use a font that has both formats, or convert a TTF to EOT.

Good article, that’s what I’m looking for. thanks

Nice summary. I’ve done a bunch of research on these options as well:
http://paulirish.com/type/ Lots of slides and research here.

I’d add that Linotype’s current EULA allows use of Cufon with their web license, assuming you do the domain binding. And more and more are allowing it everyday.

One quirk with Cufon is its built-in 10ms setTimeout before actually modifying the text. This is only problematic if you are doing some further computations with the modified text, especially when calculating based on element height/width.

Does anyone know of any cases where a company has been approached for using cufon without license to the fonts?

Regarding the con of Cufon “You can’t apply a hover state to converted text,” you can work around this using jQuery’s hover event. For instance, in the hover over function, use Cufon.replace with the hover colour, and in the hover out function, use Cufon.replace with the original colour again.

I hope this is of use to someone!

Thanks,
Zoe.

Thanks for comparing them all.
I wrote a plugin that implements Cufon into WordPress themes easily http://tomsramek.com/plugins/all-in-one-cufon/
I hope someone will find it helpful.

In your artcile you said (“Internet Explorer 6-8 do not support font-face”) Actually Internet Explorer was the first browser to support font-face – its support comes since version 4 (or so). The only difference is that they use a different font type or simply a different format – .eot instead of ttf. There are already several online services (like http://www.kirsle.net/wizards/ttf2eot.cgi) that can convert ttf into .eot so support for font-face works well among most browsers.

the problem with font-face is that it doesnt look good when ClearType is enabled on win7 – it looks all jagged. But there are some possible solutions (http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/)

Cufon does allow hover states, but not on by default. Check the styling documentation

I was struggling with this for awhile..

Try to add this line to Cufon though:

Cufon.replace(‘li’, { hover: true, hoverables: { li: true, a: true } });

Worked for me!

I made a website recently using Cufon. It proved to have very good, Photoshop-like, quality rendering, especially in font sizes larger than 18px. But it is also pretty good at smaller font sizes if you use maximum (2048) units per em, which I did.

Rendering is almost instant, no visible delay at page load.

What I observed is if you use small fonts (11-15) then sharpness of resulting text vary between Internet Explorer (VML) and other browsers (Canvas). For eg. 13px was very sharp on IE but blurred in FF,Opera,Safari. On the other side 12px was sharp on canvas renderer but blurry on VML renderer. To overcome this I used slight different font-sizes for IE.

Here is a screenshot of page and it’s design to compare Cufon vs Photoshop rendering. In my opinion Cufon looks pretty good in this comparison.

Screenshot is here: http://4.bp.blogspot.com/_evkSubHnZiQ/S_HVA4cBPeI/AAAAAAAAJGs/I8syK7fS2W8/s1600/cufon-photoshop.png

Do any of these methods load without first flashing the un-replaced font in IE? I’m using Cufon, and it looks great in FireFox, but it’s totally unacceptable in IE because the page loads the “ugly” version first before Cufon kicks in with the pretty fonts. Does anyone know of a font replacement method that doesn’t do this? I would use images, but it’s for a blog and it needs to be dynamic. Thanks!

@Meisha:
Have you tried Cufon.now()? If no, check Cufon documentation for description how to use it. If yes, try to hide “ugly” content using CSS visiblity:hidden (not display:none!) and then show it after it is replaced (I am pretty confident it is possible)

I think this got posted on Stackoverflow. Very good pro con of these modules. Hopefully font-face could be part of the browser situation soon with html5.

Where do you check to see the copyrights of a particular font? What if they're default fonts on MAC OS. And thats what I want to use.

Great overview, thank you.

I believe, however, that text selection *does* work with Cufon, at least with the latest version. Text selection works well in IE, but in Firefox you can't see what you've selected – however it does work and I can Control+C and Control+V elsewhere. If you disable styles you will see the text Cufon leaves and this ensure that the solution should be both Accessible and selectable.

Regarding EULA of web embedding the font, there is a handy set of tips underneath the EULA checkbox on this page: http://cufon.shoqolate.com/generate/ You'll find a link to Adobe's article on whether its ok to embed a font and a brief known list of fonts not ok to embed. Of course, if in doubt check and don't assume.

Update: Just checked (http://wiki.github.com/sorccu/cufon/known-bugs-…) regarding text selection. They say, under a category of “Missing Features”:

“Text selection: until we find a solution that works in Opera, this feature will not be added. We have solutions for other browsers.”

..so it seems it depends on what browser you use. So I stand corrected, this feature isn't fully supported.

Yea… i have the same question

To be honest, I have no idea how to lookup licensing, but if you find out please do share.

great post ! thanks

try cufon font library http://www.cufonfonts.com

Thanks for comparing those three scripts. I use only Cufon in the projects of my clients.
If you want to see Cufon in a action check this post
http://www.sramekdesign.com/wordpress/plugins/all-in-one-cufon/

Nice article… two things though. You are wrong about 2 of cons you listed for Cufon.

1. Text CAN be selected (it just doesn’t highlight). Try it, drag cursor across cufon text like you would any other text to select, ctrl+c then ctrl+v and you will see the text was copied.

2. You CAN apply a hover method to cufon. You just have to load the hover state along with the regular state when you call the font.

Other than that, great article. I personally love Cufon, it’s a shame about the font license restrictions.

Edit… Just read Tom’s comment, apparently text selection does not work in every browser. Truth be told though, if the text doesn’t highlight 99% of the users of the site will just think the text is unselectable anyway.

Actually Internet Explorer does support @font-face, since version 4! Please check out http://www.webfonts.info/wiki/index.php?title=%40font-face_browser_support

Right, but it only supports it’s own proprietary format (eot) which doesn’t allow hinting or anti-aliasing. Therefore, as the w3 Docs define @font-face it’s still not fully supported in all browsers.

Right Clay, but there are some ways to make it work in all major browsers: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

I personally prefer to use @font-face for free fonts, and TypeKit for paid ones

FontEmbedding.com apparently has been bought out or otherwise replaced by FontsLive.com, and has apparently removed, or at least changed the URL to, their “Fonts and the Law” article. Your link now just redirects to FontsLive’s home page.

Very good post. Clear and to the point. Some of the comments are helpful. Thanks !

Even Google Font Directory isn’t a bad option. but in the same it loads the page slowly.

Even Google Font Directory isn’t a bad option. but in the same it loads the page slowly.

Even Google Font Directory isn’t a bad option. but in the same it loads the page slowly.

Urm, no, EOT fonts can be hinted or anti-aliased just fine. They’re just TrueType fonts in a funky wrapper.

“Does not violate EULA or copyrights, since font is contained within the SWF object.” “Like it or not, and argue it as you may, Adobe Flash is legally allowed to embed and use fonts that the developer has purchased.”

I would not have agreed with that statement even when I was product manager for fonts at Adobe. Using fonts in Flash (SWF objects) is just as much subject to licensing restrictions as any other use of fonts is. More font licensors are okay with it than with some uses one can think of, but it’s not some sort of magical get-out-of-jail-free card to avoid licensing issues. You still need to check the EULA for the font, and see if the use you want is permitted. If it’s not clear, you may need to contact the licensor.

the hover state on cufon is available now, just need to declare it in the script:  Cufon.replace(‘#menu_top’, { fontFamily: “YOUR FONT”, hover: true });