The Easiest Way to Use Any Font You Wish
Mar 24th, 2009 in Screencasts by Jeffrey Way 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?
Hi, I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of both ThemeForest, and CodeCanyon. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. During my free time, I sporadically write articles for my own personal blog. If it will keep you in the good graces of the church, follow us on Twitter.
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.
User Comments
( ADD YOURS )Matt March 24th
One again Jeff, amazing tutorial.
( )lawrence77 March 25th
Yes I love this!
( )Even though i’m a newbie to web!
ravi August 27th
thanx a million, I’m facing the problem since last 2 weeks…
Finally I can use these frequently…
thanx,
( )Drew March 24th
I might have to give Cufon a try, I have been using Typeface.js and have found it to work wonders. It acts basically the exact same as Cufon, but a huge bonus it that with Typeface.js the text *is* able to be selected and highlighted like regular text. However, like Cufon, CSS pseudo :hover selector is not currently supported.
I think Javascript techniques like this are quite practical for the web at the moment, as they don’t rely on users having flash. Also if Javascript is disabled, no worries, it just falls back on the default fonts declared in the CSS file.
If you’re interested you can find typeface here: http://typeface.neocracy.org/
Nice work Jeffrey.
( )Rob March 24th
That’s odd – in Firefox I’m not able to select any text rendered via typeface.js. It acts just like an image.
( )Drew March 24th
A free theme I built a long time ago uses it and I am able to select the text rendered, see here for demo:
http://creatingdrew.com/Themes/iBlog/
Dan B. Lee March 25th
typeface.js doesn’t highlight for me in FF either.
@Drew your example website doesn’t actually select the text in FF. If you watch closely, when you drag your cursor over the item it selects the container of the text instead of the text itself, I’m guessing the because if you were to try and highlight links at the end of the list, for instance the contact link, it will also select the other listed items before it. Last, I can drag the font out of its element as if it were an image.
It’s still a great alternative though.
JJenZz March 25th
I use typeface.js also, works a treat =)
( )martin March 25th
just take a look at the html that typeface.js generates… no way am I using that
( )John D April 12th
Yea, another downfall of typeface,js is that it will not let you use commercial fonts. So unless the font is free to the public it won’t let you convert it. That may not be the case for every font but I tried an Adobe font yesterday and I was blocked.
Brett March 24th
Interesting solution. I’ll have to check out this and typeface.js. This really opens a lot of doors when designing.
( )Craigsnedeker March 24th
CSS3 has a much much much easier way. A line of CSS code, a file uploaded, and your done. But the only problem us no borwser supports ut yet except for the BETA of Firefox. No javascript either.
Good tut tho
( )Rob March 24th
And the larger problem to consider… how long will it take the major browsers to universally support CSS3? They cannot even all agree on the current version of CSS.
( )Craigsnedeker March 24th
I agree with ya but Firefox should come out with it soon enough. It might work in IE8 beta I have not tried it out yet. I only tested firefox beta.
w1sh March 24th
As always, IE won’t support anything that everyone else agrees on and would help evolve web-design. When are we going to organize and boycott IE?
Noel Hurtley March 24th
Safari 3.1+ supports @font-face, too.
( )Chris M March 25th
Opera 10 (alpha) supports @font-face as well.
Also, Interrnet Explorer has supported @font-face for years but only allows the restrictive .eot format.
( )Crusar March 26th
Would be nice if all future browsers supported CSS3 and easy to degrade to.
However considering users still running older browsers this tut has an interesting approach from a designer’s point of view. Maybe a combination of both techniques would be ideal.
Cheers
( )w1sh March 24th
As always, well timed. I love you.
( )Dan March 24th
As cool as it is, it is just not good for the overall usability of the web to have text you can’t select.
I can’t wait for the future.
( )adam March 24th
the one thing that i am really curious about is how this impacts load time?
( )qalih March 24th
Having watched the sIFR tutorial on css-tricks, it isnt very hard to implement. If this is 100 times simpler it must be good. Will definitely check it out.
( )css March 24th
Good one,
I hope my boss not haven’t seen that – guess, what will be the first thing tomorrow morning to try
– however – seems easy.
( )Jarod March 24th
I don’t know, I’m just a fan of sIFR. It’s a bit difficult at first to get used to but once you get it, it’s simple, effective, and allows for things like ’selectable’, etc.
Good tutorial on a nice alternative, though.
( )Jeremy March 24th
You can indeed add a hover effect. Add the following, example below is for ‘#nav a’:
Cufon.replace(‘#nav a’, {
hover: true
});
Somewhere this is listed on their site as a recent update. I am using the hover in an upcoming site and it works fine.
( )w1sh March 24th
If that’s true, this tutorial should be updated. Collis would do it.
( )Razvan Pavel March 25th
Was going to say the same thing. The hover effect works just great. A little buggy from time to time (stuff remains hovered when moving mouse like crazy over multiple hover items).
Chuck November 17th
Hover effect isn’t buggy any more in my experience. And the latest update does hover automatically via css in most browsers.
This is best solution all around in my opinion!
Will March 25th
Yep that does work! Doesn’t play very well with “animateToselector”, but it does work.
( )Jarryd March 24th
I would only prefer sIFR over things like Cufon and FLIR just because it’s selectable text.
As soon as it does I’m gonna move away from the flash-alternative
.
( )Josh McClanahan March 24th
You can also use FLIR. Check out the tutorial on css-tricks.com.
( )Yoosuf March 24th
its cool, but how can u satisfy the Traditional Old IE users? its not working in IE8
( )Jeffrey Way March 24th
It’s working for me in IE8.
( )Gary McCafferty March 24th
Zooming in and out doesn’t work properly in Safari 4.0 Beta or Camino 1.6.6. The text doesn’t resize but the spacing between words does.
( )Justin June 12th
honestly, that doesnt really matter considering only like 2% of the web users use safari, and you are probably one of 100 people using Camino. lol. so, stick to major browsers. it is like saying that it may or may not work in Opera or Chrome. hardly any users. doesnt matter.
( )iPad March 24th
But this text isn’t like sIRF, isn’t selectionable.-
( )Angel March 24th
Very good tutorial!
( )matt March 24th
Hey Jeffrey what editor is that you are using?
( )ed March 25th
notepad ++
( )Jan March 24th
Nice one thank’s. But what in case I’m using other javascript framework: MooTools, how this resolved, since there may by potential issues using 2 frameworks on the same page
thank’s
( )Chris M March 25th
You can run jQuery without conflicts by referring to the jQuery object with ‘jQuery’ instead of it’s shorthand ‘$’
Before – $(“#nav”).
After – jQuery(“#nav).
Works exactly the same, just avoids the ‘$’ conflict used in some other frameworks.
( )insic March 24th
Ive seen couple of post about this Cufón thing around. This is quite usable but by looking at the known issue its needless to say that it still needs an improvement.
( )tamtam March 25th
nice tutorial jeff
( )chris March 25th
Have to test it later. Could be nice. Thanx for the post
( )Liam McCabe March 25th
Excellent! Will definitely try this out!
( )Shane March 25th
Nice tutorial – I’d never heard of Cufón before, and learning new things is what life’s all about
( )Matt Fairbrass March 25th
Very good tutorial. I would myself opt to stick with the sIFR technique though as the text still remains selectable, and therefore accessible for copy & paste still. But it’s good to see people coming up with new ideas around introducing better typography styling to the web. Roll on CSS 3!
( )nady March 25th
Nice tutorial …
( )I use ‘font burner’ for this, but ‘cufon’ seems better … thanks
dvdheiden March 25th
Which tool is used at step 3, see this image:
http://nettuts.s3.amazonaws.com/259_cufon/replaced.png
It looks pretty usefull to me zo I’m very curious about that…
( )Jeffrey Way March 25th
It’s the e text editor.
( )dvdheiden March 26th
Thanks! The preview function with the code next to it, looks pretty handy!
Ewout March 25th
I’ve been using Cufon for some time now and I really like the way it works.
The only 2 main problems for me are:
- no selectable text
( )- css :hover doesn’t work
ms March 25th
“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.”
This is a problem on flash replacement as well.
( )Tocki March 25th
nice.
( )Martyn March 25th
This is a great tool that I’ve some how not come across before, shame about the text not being selectable but that isn’t necessary in most cases anyway.
Great Tool, I look forward to using it.
Thanks
( )Tommie Hansen March 25th
There is also sIFR Lite (google it).. That simplifies sIFR quite a lot.
( )Dan B. Lee March 25th
Great article Jeff. Its nice to see the options we have to thwart the boring default typefaces is growing. One of your cons is that this is JavaScript dependent. I don’t think I have a problem with this; I’m partial to graceful degradation. As long as the page will revert back to a default typeface of your choice, I’m satisfied.
Keep them coming!
( )Kevin Quillen March 25th
What about Flir?
( )Diego SA March 25th
Yeah, very fucking cool!!!
( )But with CSS hover not working… well, gonna test it later! Thx!
Diego March 25th
i think, the best choice its sifr
( )Jazburgler March 25th
Can’t seem to adjust the line height for the Cufon text. Any suggestions? Tried using ems, px and %, yet none of these seem to effect it.
( )Vincent Le Pes March 25th
Why would we want to use Javascript to create canvas elements that don’t react like text when there is typeface.js (http://typeface.neocracy.org/) filling the gap? Two of your cons are out the window as the resulting font is selectable and responds to CSS accurately because it it still regular text…seems to beat sIFR and Cufon to me…is there a drawback I am missing? They all rely on javascript, but beyond that?
( )Vincent Le Pes March 25th
So I looked into it and apparently typeface uses the canvas element as well, I was misinformed by the site I saw hyping it…
( )Jeffrey Way March 25th
I’ve also read that typeface.js doesn’t work in IE8. I haven’t verified this though.
( )karl norling March 26th
It’s true that the text isn’t “Selectable” but you can still “mark” over it and copy the text, there is just no indication of what you have selected.
I got a comparison of the Cufon, Sifr and Flir here:
http://www.whatevermakesmylifeeasier.com/cufon/
http://www.whatevermakesmylifeeasier.com/sifr/
http://www.whatevermakesmylifeeasier.com/flir/
The main thing to take notice to is how different the font’s are being rendered.
( )Steve March 26th
Thats awesome great tut
( )suBi March 26th
this is a gr8 alternative to the more sophisticated siFR and sWIFr processes ! Awesome.. will give this a try sometime soon
( )harold March 27th
This is brilliant
However:
What if you want to use it on text that is generated through ajax?
I’m using jquery how do I call the replacement again?
cheers!
( )davidino March 27th
nice easy!
( )nixie March 29th
Wow, that is so useful!
( )MarkB March 30th
This script works beautifully, BUT…
the jQuery Lightbox file “lightbox.js” – breaks Cufon.
After digging around for hours, I started removing scripts that were called above cufon, and when lightbox.js was removed, it all worked fine…
I need lightbox.js tho… What to do?…
( )Patrick H April 1st
Has anyone had trouble adjusting the line -height on text while using Cufon. I can’t seem to adjust it over on my end.
( )Keith April 2nd
One of the easiest and probably greatest tutorials ever!
( )Pattie April 6th
I’m trying to figure out line-height with cufon, too. Anyone got it?
( )Piyush April 9th
Hey, Can we integrate it into WordPress?
If yes, could you explain how?
Thanks, and BTW, great tutorial.
( )John Bon April 12th
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′);
Meshach April 19th
That should work.
( )Andy April 17th
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!
( )Meshach April 19th
Thanks for this Jeffrey!
( )csseyah April 22nd
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….
( )Bilal Awan April 26th
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.
( )jona April 28th
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?
jona April 28th
break’s in notepad++ looks like ’s in firefox but not with IE
( )does anybody knows how to fix this problem?
Justin May 11th
The Cons on this are truly an issue…
( )Module23 May 25th
Great tutial, can’t wait to work with CSS3. Hope this Cufón will be more compatible with all browsers.
( )Sebastian June 1st
Many thanks for the screencast. It is very simple and I am happy about cufon seems to be a real great solution.
( )Dizzyedge June 5th
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?
( )Shelly June 5th
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?
( )xav June 7th
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.
( )Small Business Website Design July 4th
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…
( )b July 9th
if you have a complicated website with a lot of positioned div’s, it messes up the whole page(in Firefox) ……
( )Christoffer July 14th
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…
( )noski July 16th
I can’t get the IE script to work at all?
( )Paul July 26th
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.
( )Paul July 26th
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!
( )Tom July 28th
Wish all the screen casts were this simple and fast. Very cool, defiantly going to try this out.
( )John August 9th
Googled the Cufon solution for chinese/korea characters, no lucky. The generator would come out a large js file.
( )Jaap August 15th
This is so simple, fantastic tutorial. Very well explained btw.
( )kenoodo August 22nd
I want to use unicode U+1950-U+1974, but seems Cufon can’t do it, am I right?
( )Enrico August 22nd
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
Ricardo "mAiN_iNfEcTiOn" Machado August 30th
How about performance? Is it good (or should I say as fast as using normal system) to have a ‘fonts renderer’?
Hugs
( )Hertfordshire Web Guy October 13th
Fantastic tutorial JW!
( )Got Cufon up and running in the three minutes you promised and already thinking of the possibilities…
marciaczek November 13th
That was my first cufon experience, Thank you for this tutorial, now typographic paths are open for web
( )trCreative Web Design November 20th
Thanks, usually use sIFR3 but will give this a go!
( )fox November 25th
hello great tut ….
I need cufon to lightbox …
But it does not work …!?
I want to change the name of the image whit cufon
( )reezluv November 28th
damn cool man, thanks!
( )Amit December 6th
This is awesome…../ wowoo.
( )Jason Williams December 9th
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.
( )netmastan December 15th
line-height doesn’t work. Too bad
( )Filn December 16th
Hey,
Great tutorial. many thanks. But.. there is a way to use the :hover property? Like h1:hover {}?
( )SOSFactory December 20th
Great! it works smooth.
( )Hutek January 7th
Thank JW, I’m using Cufón for my blog, it work like fine. I like Cufón
( )Jeffrey Way January 7th
Glad to hear it!
( )alex January 19th
loved the screencast. good coverage on jquery also
thx a lot for the effort, youre making my day!
( )yussi ariefiyono January 28th
WOW.. nice one.. thank for the effort, indeed its really help
( )Dilip February 5th
can i use 2 or more different font with cufon.js .
( )