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.

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.

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.

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.

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 seperated value as given below

Cufon Problem in IE

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

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.

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

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.

Related Posts

  • How to use Google web fonts ? Over the time if you notice, the web is becoming more beautiful and pleasant. People have actually become more serious about UX, UI, Typography and the related […]
  • How to use Font Awesome Icons? What is Font Awesome? Font Awesome is basically an Icon-Font Kit. It is a font that renders icons and is somewhat similar (though not exactly) to the windings in […]
  • How to use Glyphicons in bootstrap? Like many other useful components, Bootstrap also provides a lot of easy to use Glyphicon "icons". Well in simple terms these contain a list of useful font icons that […]
  • Understanding jQuery animate function jQuery's .animate() function has helped many front end developers around the world to create web pages with custom animations and effects by just using combinations of […]
  • How to center align a Div ? One of the most common queries all the new front End developers have is " How do we center align a DIV? ". Well, let me tell you that it is one of the easiest task. […]
  • How to disable autocomplete in HTML? The autocomplete feature has been of a great help as a website visitor especially if you have a long form that you might fill more than once. The autocomplete feature […]