Introducing Cufón, a Font Replacement Solution ∞
Posted at 4:46 PM on March 23rd, 2009
If you’re like me, you probably have been searching for a solid web font replacement technique which avoids replacing text with images or utilizing both Flash AND Javascript. In a nutshell, web font replacement aims to allow web designers to replace standard web fonts on a website with any font you can imagine while keeping your markup semantically meaningful, accessible, without ballooning page load times. There are few good alternatives out there but most require Flash and JavaScript. The problem with that is requiring an end user to have BOTH Flash and Javascript installed and turned on.
Enter Cufón, the Javascript-based font replacement solution which makes heavy use of canvas and VML. This offers a great alternative to other solutions out there – no Flash or images required. As with any of these solutions, there are some notable advantages and disadvantages, however, it’s ease of use is what really blows me away.
Five Easy Steps to Getting Started with Cufón
- Grab and upload the Cufón javascript from the Cufón website.
- Generate a font on this page. You can add a bold and italicized version of your font if you plan on using them.
- Add the following Javascript to your
<head>section and make sure to add the elements you plan to prettify:Cufon.DOM.ready(function() { Cufon.replace('h1'); });To take care of multiple elements with the same font, use this code, adding the elements you need with CSS selectors:
Cufon.DOM.ready(function() { Cufon.replace('h1,h2,#header-nav li'); }); - In IE, there will be a short but noticeable delay between the old font being flashed and the new font replacing it. To fix this (optional), add the following line of code just before the closing <body> tag.
<script type="text/javascript"> Cufon.now(); </script> - Test everything!
If you’d like to see some test pages, Cameron Moll has written an article on Cufón and graciously built a set of pages that show a few ways to implement Cufón
Using Multiple Fonts
Cufón also has support for multiple fonts. Just generate the fonts you need using the link I provided earlier, modify the code below and off you go! It really is that easy! Sample shown below is from the Cufón GitHub wiki, which has more details on Cufón usage.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>
</head>
<body>
<h1>This text will be shown in Frutiger LT Std.</h1>
<h2>This text will be shown in Myriad Pro.</h2>
</body>
</html>Issues with Cufón
As Cameron Moll points out, there are some issues with using Cufón on a live site, the most notable being the inability to highlight and copy/paste text, which is really the biggest issue for your site’s users.
Combine that with the EULA issues, which prevent you from being able to legally embed fonts in Javascript files for most fonts on the market today. I’ll come back to this issue in just a bit.
Making Progress
An issue which was recently fixed is the ability to use hover states. For performance reasons, :hover is not enable by default. To enable :hover, you need to use the following code:
Cufon.replace('h1', {
hover: true
});The default only turns :hover on for links. If you’d like to use it for other elements, you need to specify which elements to add support for:
Cufon.replace('h1', {
hover: true,
hoverables: { strong: true, em: true }
});Pretty simple to implement and it picks up on the :hover styles you’ve added to the elements that have :hover support enabled. There are a few issues though, with the lack of text-decoration support being the big one. I haven’t tested this, but border-bottom should be a viable alternative to text-decoration.
My Thoughts
I’ve started using Cufón on a site that has not yet been released (UPDATE: I’ve implemented it on this site, as well) and I have been very pleased with it so far. It’s extremely easy to set up and use and looks very smooth. One thing I’ve noticed is there is typically a slight fuzziness around the edges of the font. I’m assuming this is due to the units per em, which should typically be set to around 360 units per em when you generate fonts for your own usage.
The other issue is knowing what fonts can be used with Cufón. For sIFR, most fonts are fair game, since the font is embedded in a Flash movie, which is typically an approved usage by most font foundries for most fonts. With Cufón, the Javascript files used for the font can be easily “stolen” and either used on another website or reverse engineered. This issue is the big stumbling block preventing Cufón from being dubbed the font replacement solution of the future (which I think it is). Once font foundries get on board with this solution, Cufón will easily be my method of choice for replacing boring, old web fonts with an assortment of beautiful, non-standard fonts.
18 comments so far
Oops. I dribbbled.
-
I designed this for a big announcement on the UpThemes blog.
-
Working on revisions to a logo we were commissioned to design.
-
-
Client requested some color changes.
Steal this design. See if I care.
Hand-crafted in the year of the tiger.
You redid your header with Cufón, correct?
Was it easy to master? Took me a few to figure sIFR out..
Yep, you caught me in my transition
It’s really very easy. Everything is controlled via CSS, however, there are just a few things you can’t use, like word-spacing. Other than that, easy peasy.
thank you for creating this, i’m gonna give it a test. the original sifr was a PAIN in the arse and i’m so happy i winded up scrapping it for arial on my client’s website. (not that i dislike the effort they made but it was so no prime-time.)
Thanks. I will use this on my next project. I noticed you are missing the accented ‘o’ character in the heading of this page. Using Firefox 3 on Leopard.
UPDATE: The accented character works for me now.
lol, thanks for the update on the page title.
Yeah, I’ve since removed cufon from every h1/h2. I was really just playing around with it. I think I’ll keep it on my menu though.
Any reason for removing it? Just prefferred your web-based font? Or were you having issues?
I got some free time tonight and implemented it on my site with DIN, Let me know what you think..
It is worth mentioning that you cannot target a Cufon generated font to a specific CSS selector unless you first add a JS framework like jQuery or MooTools to your webpage.
Yes, that’s a good point. For the sake of being as lightweight as possible, out of the box you can target specific elements like ‘h1′ ‘h2′ ‘strong’ or use
document.getElementById('navigation'). You need to call in your framework before the Cufon script to use advanced selectors. Thanks for bringing that up.Do you know if it’s faster at rendering fonts than sifr? I’ve been using sIFR for a bit of time now and it seems to slow down pages a bit if there are a lot of replaced elements.
Another issue is with screen readers. Since cufon wraps each word in your text with a … screen readers pause between each word. And if someone is browsing by getting the reader to list the headers… the reader will only speak the first word of each header.
Hi, Chris. Cool tips. I’m just a beginner in WordPress and i’m lovin it! what is this cufon font that you are using in the titles and header?
Possible to hire you for a freelance job? I’m from Brazil. Regards.
Hello Chris can I ask what is name of font you using on this website in titles , or heads ?
This is just fantastic!!
Had a consistent flashing problem with IE even with the cufon.now(), and after a lot of testing the best solution for me was to do a style visibility hidden for the replacement elements in the header, run a cufon replacement script just before the tag, setting cufon.now() and then resetting visibility:visible for the replacing fonts. you can see it in the source at: http://jay-kapadia.com
Is the image-text searchable by search engines?
[...] таке cufón і як його підключити? 2.Five Easy Steps to Getting Started with Cufón 3.Replacing Fonts Using Cufon VN:F [1.8.1_1037]please wait…Rating: 0.0/10 (0 votes cast)VN:F [...]