CSS 3 is on the horizon, and we’re all getting excited. Thanks to the latest browser updates, developers can begin working with time-saving new properties – such as @font-face. Unfortunately, the availability of these features is limited to a tiny fraction of our overall userbase. At least for the next year or so, we’ll need to continue utilizing the Flash and Javascript alternatives when embedding fonts.
Luckily, a new contender, Cufón, has made the process unbelievably simple. What makes it different? Rather than Flash, it uses a mixture of canvas and VML to render the fonts. In just a few minutes, I’ll demonstrate how to use any font you wish in your web applications. Excited?
Pros
- Lightning fast!
- 100 times more simple than siFR.
- Up and running in a few minutes.
- Not dependent upon a server-side language, like FLIR is.
Cons
- It’s Javascript dependent. If disabled, the default fonts will be used.
- The text isn’t selectable – never a good thing.
- You can’t apply a hover state to converted elements.
Step 1: Download Cufón
Visit Cufón’s website and right-click on the “Download” button at the top. Choose “Save-As” and place it on your desktop.
Step 2: Convert a Font
In order to function, we need to use the font converter utility on the website. Alternatively, you may download the source code and convert your fonts locally. For the purposes of demonstration, I’ve chosen to use an obnoxious font: “Jokerman”. Note – Windows users: you may have to copy the font from your “FONT” folder to the desktop for this to work.
If desired, also upload the italic and bold files as well.
Step 2b
Next, you’ll need to choose which glyphs should be included. Don’t be so quick to simply “CHOOSE ALL”. Doing so will cause the JS file size to increase dramatically. For example, we probably don’t need all of the Latin glyphs; so make sure they are left unchecked. In my case, I’ve checked the ones you see below.
Step 2c
Cufón allows you to designate a specific url for your file, to increase security. It’s extremely important that you ensure that you have the proper privileges to use a font. REFER HERE to review the terms. If advantageous, type in your site’s url into this box.
Since we’re just getting started, you can leave the final two sections at their default values. Accept the terms, and click “Let’s Do This”. You’ll then be presented with a download box asking you where to save the generated script. Once again, save it to your desktop for easy retrieval.
Step 3
The next step is to prepare our project. Create a new folder on your desktop, add an index.html file, and drag your two Javascript files in.
Open the index file in your favorite code editor, add the basic HTML tags, and then reference your two Javascript files just before the closing body tag (you’re free to add them to the head section as well).
<script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/Jokerman_400.font.js"></script>
Calling the Script
Now, we need to decide what text should be replaced. Since our document is still blank, feel free to litter it with random tags and text. Let’s try to replace the default font in all the H1 tags with Jokerman.
<script type="text/javascript">
Cufon.replace('h1');
</script>
When we call the “replace” method, we may append a string containing the tag name that we wish to replace – in our case, all H1 tags. Save the file, and view it in your browser.
Step 3b
As always, IE needs a bit more to play nicely with the others. If you view this page in IE, you’ll notice a slight flickr/delay before the font is rendered. To remedy, simply append:
<script type="text/javascript"> Cufon.now(); </script>
Step 4
Let’s imagine that you want to have more control over your selector. For instance, perhaps you don’t want to change ALL the H1 tags, but merely the ones within the header of your document. Cufón doesn’t have its own selector engine built in. This feature was omitted to keep the file size as small as possible. Though this might seem like a downfall at first, it’s actually a great idea. Considering the ubiquity of Javascript frameworks lately, there is no need to double-up. We’ll review two methods to target specific elements.
Method 1: Javascript
If you won’t be using a JS framework in your project, we’ll simply use:
Cufon.replace(document.getElementById('header').getElementsByTagName('h1'));
The code above states, “Get the element which has an id of “header”. Then, find all of the H1 tags within this element, and “replace” them with our new font.
Method 2: jQuery
To piggyback off of jQuery’s selector engine, we only need to import jQuery before Cufón.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/Jokerman_400.font.js"></script>
Cufon.replace('#header h1');
It’s as simple as that! Please note that you MUST import jQuery BEFORE your Cufón script in order for this method to work.
Complete
Believe it or not, you’re finished! With just a few lines of simple code, you’re free to use any font you wish! Just make sure you have permission and are compliant with type foundries’ licensing.
The main concern from the perspective of the type foundry appears to be that the typeface script generated by Cufón could be used to reverse engineer the very typeface itself.
-Cameron Moll
What are your thoughts? Have a better method that I’m not familiar with?
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Breezi Comming Soon page - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I’m a js noob. Lets say I want h1 and h2 headers. Can I do something like this?
Cufon.replace(‘h1′, ‘h2′, ‘h3′);
Instead of
Cufon.replace(‘h1′);
Cufon.replace(‘h2′);
That should work.
When comparing Cufon and Typeface, Cufon came out on top. Mainly because typeface.js didn’t like the kerning on my fonts.
http://thatguynamedandy.com/blog/text-replacement-comparison
Despite popular belief the text is selectable in both Cufon and Typeface, however it is done blindly, in that you cannot see the cursor dragging over the text. It will be good if someone managed to crack that one!
Thanks for this Jeffrey!
You open my mind for the new style of web designing dude.. I can used now my favorite font without converting it into images. Good Job Dude….
It all works perfect. But the problem with Cufon and Typeface is unlike SiFR these both rivals have lack of computability with IE7 on some machines and IE8 in majority. So we cant rule out the face that these are a good competitors to SiFR but not the best unless the developers sort out issues for these to be 100% cross-browser.
hi, just to say you can apply a hover state,..
–>
Cufon.replace(‘body’, {hover: true});
to me the big problem is that all the breaks in my editor (notepad++)are interprated by cufon like ’s
does anybody knows how to fix this problem?
break’s in notepad++ looks like ’s in firefox but not with IE
does anybody knows how to fix this problem?
The Cons on this are truly an issue…
Great tutial, can’t wait to work with CSS3. Hope this Cufón will be more compatible with all browsers.
Many thanks for the screencast. It is very simple and I am happy about cufon seems to be a real great solution.
I quite like Cufon. Cool tut.
Can you use Cufon to call up two separate fonts? For example have a font for h1 and another font for h2?
Your cons aren’t completely correct. You *can* hover (there’s instructions on the site) and you *can* select the text (it just doesn’t turn blue). it even has text shadow support and text-gradient support.
As for “javascript-dependent”…well isn’t every font-replacement doohickey that way?
I am sorry Jeff but I played around with Cufon.now(); to improve the performance in IE but when I paste this snippet of code the whole Cufon doesn’t work and returns an error. I tried prepending, appending and chaining, without effect.
I’ve spent 3 hours messing around with Cufon and trying to get some cross browser uniformity and to be honest, I don’t think it’s worth the hassle. For the meantime, I think I’ll stick with using images if I require more attractive headers. And there’s always the blessed ‘alt’ tag…
if you have a complicated website with a lot of positioned div’s, it messes up the whole page(in Firefox) ……
Really nice tutorial…
I laughed a several times, when I spotted your small mistakes – it’s nice to see that even pros make mistakes sometimes…
I couldn’t make it work, but I just needed to place the Google jquery api before the cufon js… I could have searched for hours if I hadn’t seen your tutorial…
PS: I too pronounce it “coo-fun” although it seems French…
I can’t get the IE script to work at all?
Thanks! Got this working but perhaps someone has a solution to this one. There is too much spacing between the words in the cufon text. Tried 2 different fonts and same problem. Tried adjusting in css, but didn’t work. Anyone else experience this? Here’s an example: “Great Tutorial Thanks” See the spacing. That’s how the text ends up looking.
shoot, my attempt at providing an example failed. spaced were deleted. anyway, you get the picture. word spacing is too much…each word spread apart…thanks!
Wish all the screen casts were this simple and fast. Very cool, defiantly going to try this out.
Googled the Cufon solution for chinese/korea characters, no lucky. The generator would come out a large js file.
This is so simple, fantastic tutorial. Very well explained btw.
I want to use unicode U+1950-U+1974, but seems Cufon can’t do it, am I right?
I have a trouble with it… I have done online the font.js file, I have uploaded it on the specified domain, than I have upload the test file, with this JS code (just before tag):
Cufon.replace(‘h1′);
Cufon.now();
The CSS style for h1 is:
color: #01700b;
font-size: 40px;
font-style: italic;
font-weight:bold;
But the font is showed like the usual undefined default… look at yourself:
http://www.metatad.it/testing.htm
How about performance? Is it good (or should I say as fast as using normal system) to have a ‘fonts renderer’?
Hugs
Fantastic tutorial JW!
Got Cufon up and running in the three minutes you promised and already thinking of the possibilities…
That was my first cufon experience, Thank you for this tutorial, now typographic paths are open for web
Thanks, usually use sIFR3 but will give this a go!
hello great tut ….
I need cufon to lightbox …
But it does not work …!?
I want to change the name of the image whit cufon
damn cool man, thanks!
This is awesome…../ wowoo.
So I just learned about sIFR yesterday and I guess I got pretty lucky to find this blog becuase Cufon kicks major Ass! You guy’s really saved me considering I was this close to throwing away $800 for flash.
I Tried the tutorial and oh yeah instant Gratification! Thanks Again.
line-height doesn’t work. Too bad
Hey,
Great tutorial. many thanks. But.. there is a way to use the :hover property? Like h1:hover {}?
Great! it works smooth.
Thank JW, I’m using Cufón for my blog, it work like fine. I like Cufón
Glad to hear it!
loved the screencast. good coverage on jquery also
thx a lot for the effort, youre making my day!
WOW.. nice one.. thank for the effort, indeed its really help
can i use 2 or more different font with cufon.js .
Another great tutorial Jeffrey!
When I went through this tutorial, for some reason my font (Kunstler Script) rendered very small and was unaffected by any css font-size properties.
The fix came in setting the font size in javascript:
Cufon.replace(‘ h1′, { fontSize: ‘48px’ });
Just thought I’d toss that out there in case anyone has similar issues.
Great tutorial! Thanks for it!
This inspired me to write a plugin that implements Cufon into Wordpress themes http://tomsramek.com/plugins/all-in-one-cufon/
Great tutorial!
Is a good solution for frontend developers!
How do you change this so you can have more than 1 font in any particular document thanks
Fantastic post, just what i’ve been looking for. Cufon for Wordpress is definately the way forward
Works like dream! Thanks Jeff!
Thanks a bunch. I love it!
Thanks for this very well-done tutorial. I was really psyched about how easy using Cufon was and was able to get it up and running in no time. Excellent!
I was also psyched when I ran across this article, which showed how to combine Cufon with CSS’s @font-face using the jquery.fontavailable plugin:
http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/
It basically comes down to declaring @font-face in your CSS, but also having this code snippet:
$(document).ready(function() {
if(!$.fontAvailable(‘Name of your font’)) {
Cufon.replace(‘h1′);
}
});
As in, if the @font-face directive succeeded, you’re all set; otherwise let Cufon take care of the font.
It looks really promising, but *unfortunately*, this logic fails on Firefox 3.5 and up (I don’t know about previous versions). Not sure why, but other people have noticed it, and the maintainers of the plugin know about it:
http://code.google.com/p/jquery-fontavailable/issues/detail?id=2
Some day this stuff will be more consistent, I’m sure!
Thanks again for this tutorial!
Thanks !
very good !