How to implement Cufon fonts ?

The web is getting creative and beautiful. You can find  a variety of new font’s being used across the web making the site look beautiful and creative. There are various font replacement techniques available online now. One of them is SIFR but it needs flash to be working and also the set up isn’t that easy. That’s where Cufon comes into picture claiming to be better and easier than most of the previous font replacement techniques.

Cufon is one of the latest font replacement techniques which claims to be easy and faster, and does not depend on Flash too.

UPDATE – The statement above was true around the time Cufon was popular. However, the Cufon Project has been stopped around early 2017 as the standard web font implementation is a better way to do it. However, if you still need to know about Cufon and its implementation, this article would help you.

Steps to implement Cufon Fonts

As the developers of Cufon claim, implementing Cufon is much easier than SiFR. You can follow the below listed steps to implement Cufon on your site.

Step 1.

The First step would be to download the Cufon JavaScript file from Cufón’s website. Visit their website and right-click on the “Download” button at the top, click on “Save-As” and save it on your desktop.

You can also download it or link to it from the CDNJS hosted version.

Step 2.

Secondly, you’ll have to convert your font file. You can do that on Cufon’s website. Select and upload the files that you want to convert.

Update – As of 2017, the website no more supports the conversion or generation of font file. However, you can host it on your own using the source code from GIT.

Once you have browsed the fonts you want to convert and use through Cufon, you’ll have to select the glyphs that you want for the font. Do not check “All” unless you really want all the glyphs as this would increase the file size of the javascript rendered. Just select the ones that you want.

Step 3. (optional)

Thirdly, fill in the “Security”, “Performance and file size” section if required (Optional step). Default values are more than enough in most of the cases. Do not alter these sections if you are not sure about what you are doing.

Step 4.

Agree to the Terms and Conditions and click on the “Let’s do this” button. Once you click on the button, you’ll get a javascript file which you should save on your desktop along with the previous file downloaded in Step 1.

Step 5.

Include both the javascript files in your page and add the following code in the section of your page.

<script type="text/javascript">
	Cufon.replace('h1');
     //This would replace all h1 in the page with Cufon font
</script>

If you notice, we have passed ‘h1’ as parameter to the replace function. This will replace all the ‘h1’ tags in the page with custom font. You can also pass multiple elements as a comma separated value as given below

Cufon.replace('h1,h2,#main-nav li');

// A css selector like "#main-nav li" can be used if jQuery is used.

Cufon Problem in IE

Few versions of IE usually have bugs with Cufon. You can fix that by adding the following code.

<script type="text/javascript"> Cufon.now(); </script>

Cufon IE9 Issue

Cufon has an issue of not showing up with certain versions of IE 9. You can fix it by using the following code before the Cufon.replace() calls. You can use a conditional comment to make sure that the code executes only on IE9 or above like shown in the example.

<!--[if gte IE 9]>
	<script type="text/javascript">
		Cufon.set('engine', 'canvas');
	</script>
<![endif]-->

Using multiple fonts in Cufon

You can use multiple fonts too in Cufon. You just need to generate the custom font related JavaScript from Cufon’s website and include the JavaScript as you did for the previous font. The code might look similar to what’s shown below

<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>

The above code would add font “Frutiger LT Std” to all ‘h1’ tags on page and font “Myriad Pro” to all the ‘h2’ tags.

I must say that Cufon has really made including custom fonts on the webpage an easy task. It is mush easier when compared to other few font replacement techniques. But the only issue I find is that you we can not copy the text implemented through Cufon, which I guess is fine in case your users are not keen on copying content.