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
latestfont 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.
You can also download it or link to it from the CDNJS hosted version.
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.
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.
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.
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.
Using multiple fonts in Cufon
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.