Font Replacement Using Cufón
We all know about the big font replacement methods. sIFR's big. Image font replacement has gained some steam. Not too many people know about a great project named Cufón though. Cufón uses a unique blend of a proprietary font generator tool and JavaScript to create a custom font renderer in canvas and VML. Here's how to use Cufón to render the Sin City font for your headers.
Step 1: Generate the Font
The first step is to use the Cufón font-generator tool to convert and customize the way the font renders. I was very impressed with the number of options available for the font conversion. Once the conversion is done, Cufón's generate presents you with a JavaScript file containing the font information as Cufón can read it.
Step 2: Include Cufón and the Font
Include the Cufón JavaScript file and the generated font's JavaScript file.
<script type="text/javascript" src="cufon.js"></script> <script type="text/javascript" src="Sin_City_400.font.js"></script>
Step 3: Selectors and Elements
Time to select the elements to Cufón-ize. I don't recommend using Cufón for every bit of language on the page -- doing so can be resource-intensive. Generally you want to use custom fonts in headings so that's what I've chosen to do below.
Cufon.replace('#cufon-area h1, #cufon-area h2, #cufon-area h3');
In my experience, Cufón looks better than both sIFR and image methods. Be sure to check out Cufón as it's an outstanding tool and I look forward to seeing where the project goes. What are your thoughts?
Gentlemen...you're welcome for the gratuitous Jessica Alba image.
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
Cufon’s great, the only dealbreaker is: no selectable text! sIFR provides that and to me that’s really a big factor in the font replacement decision making.
I use Cufon on my site, but there are a couple of limitations/problems:
1) As @wink said – there’s no selectable text – but they’re working on that
2) Screen readers have a bit of a spaz when reading out the replaced text as each word is surrounded by a So. It. Reads. Each. Word. As. If. It. Was. A. Sentence.
Great Cufon Review! You might also find this resource interesting, it list 5 image replacement techniques, including cufon.
5 Image Replacement Techniques For Custom Font Embedding
The only problem at this point, with whatever method of font replacement, is the licensing. Before using any font on a website, it’s important to check whether public use is allowed.
Cufón is good in this respect because it allows you to limit the font to a certain domain, but there’re still some issues with using a font face legally.
Just fyi. It’s not like using it on a personal site will break the bank either way. :)
As a programmer, someone who doesn’t worry about font licensing and such, I think font licensing and all that sucks. I’d go as far as saying that it’s holding the internet and web design back.
yeah, I already knew bout cùfon but
it sux, cuz u cant’t select the text, and this could b a really frustrating xperience for the users.
Cufon is really awesome. I actually used it for a day on my blog, but it was 38kb of Javascript (minified, not gzipped) so I could replace 3kb of images. Not worth it yet unless you have a good amount of text to use it on.
Also, totally agree with you about licensing David. It’s BS.
While font licensing is a pain, I understand it’s use. Designing a decent font is hard work; I’d want to be paid for it too.
I’ve yet to meet a headline that couldn’t be handled with an image+text+text-indent: -999em; So the only use I would have for sIFR or Cufón is in a CMS application where the headline content was unknown.
Very interesting to watch though. Anyone care to change my mind on sIFR and Cufón?
Looks very great, i didn’t know it, thanx.
I discovered another great tool, typeface.js while i was coding my girlfriend’s photoblog, it provides selectable text but, sadly, it’s not cross-browser.
Not bad… Unfortunately a bit large for me. I would prefer something smaller in size. Anyway… good
Funny how far we need to go for custom fonts, huh?
This is my preferred method for font replacement, too. Much easier than the others I have tried (sIFR and FontJazz). Using it on my personal site without (WordPress install), and couldn’t be happier with it.
I decided that I won’t be using sIFR or Cufon in my projects anymore, they are slow, and cause content jumps after domready, which is really annoying if the visitor has already begun reading text.
I will wait for the css3 font face property to become mainstream before I would consider using custom fonts again.
Then again, I’m talking about mainly heavy content driven sites, and not highly graphical sites, which might require a fancy font here and there.
Actually, you can select (and copy/paste) Cufon text. You won’t be able to see your selection over the ‘Cufon-ed’ text, but try it – it works.
Granted, the average user (and indeed it seems, most people) don’t realise, but the text is still there.
The unique problem in this method is for a device that not suport CSS. The words in the title, in this example, is showing twice. It´s no so good.
Thanks for the tutorial but I’ll certainly wait for CSS3 support for font-embedding.
I actually tried this yesterday, but it didn’t work with Chrome or Safari.
But your magical demo is working.
Did you do anything special to make it work?
I followed the tutorial on their website, but could get it to work for those 2 browsers.
Hi,
Me and my colleagues have made a direct test between jQuery SIFR – http://jquery.thewikies.com/sifr/ and Cufón http://wiki.github.com/sorccu/cufon/usage.
Disadvantages of Sifr are advantages of Cufón :):
bad browser stability
does not take into account the width of the parent div
in certain cases may occur horizontal scroller
for a bold font you need a new .swf
does not take into account line-height or any other HTML tag
In both cases, the web bots can see the page as html document. Replacement is performed on the client side when the page is already loaded.
Our live test is on http://www.intera.si/intrix_crm. It works in all major browsers…I hope :)
@Ian Oliver: Cool! I did not know that this works :)
Very nice job Andrej!
cufon, sifr: they both generate text dynamically so I, personally, have no problem to use any of them!
What about printing a page that has fonts rendered with Cufón or sIFR?
I tried printing some demos made with them and I only got the simple html.
my mistake, actually, sIFR generated fonts print exactly as on screen.
I love cufon. Unfortunately, my favorite fonts don’t allow it in the license.
Its Awesome man..
@David Walsh: Using fonts that are not “open-source” beyond the license offered by the manufacturer/designer is the same as someone using your proprietary code, your photography, illustration, written word, music, etc., without your permission. It’s a drag, but a legit issue for those that design and produce fonts for a living and there isn’t one bit of difference between fonts and those other items mentioned above.
On the other hand, if the actual font file is/can be protected, I see the use being the same as when I use fonts in print design. The font is viewable, my client gets to “use” it in their promotional print material, but the (digital file) is not there for the taking by the viewer/reader of the piece.
Just like artists and musicians, these issues are morphing with technology. Font producers will have to roll with it as well, especially if embedded fonts hit CSS.
Why did you steal the facebook design? Kind of oogly for a web design resource site.
Selectable text seems like a big issue for Cufon at the moment, however, for some reason Firefox in Linux (Ubuntu Karmic) seems to allow you to select the text – and copy/paste it correctly.
I wonder why? Any ideas?