Cufon Font Replacement [How to]

Posted by Raza Rahil Hussain in Programming, Webmaster | 3 comments

Tweet

Font replacement on a Web Page is very popular now in days, every developer customizes the title or heading of the blog with some specific font. Cufòn font replacement is the easiest way to perform font replacement without any software.

What is Cufon?

Cufòn is a “fast text replacement with canvas and VML”. It is worthy alternative to sIFR, which despite its merits still remains painfully tricks to set up and use.

How Cufon work?

Cufòn consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript.

Browser Support:

• Internet Explorer 6,7,8 and 9
• Mozilla Firefox 1.5+
• Safari 3+
• Google Chrome 1.0+
• Opera 9.5+
• iOS 2.0+

Here’s how to use Cufòn to render the font to amaze all your readers.

Step 1: Download the Cufon

The first thing you need is to download the Cufòn javascript file from http://cufon.shoqolate.com/generate/ and right click the “Download” tab – choose “Save Link as..” and save cufon-yui.js and upload to your own server.

Step 2: Generate Font

Use the font converter on the website, choose the font file you want to convert and click “Let’s do this” on bottom of the page.

Step 3: Insert Code

All you need to do this embed all JavaScript files in the head section of your HTML.

[sourcecode language='js']


[/sourcecode]

Step 4: Specify your Element

[sourcecode language='js']

Cufon.replace(‘h1′);

[/sourcecode]

See the Demo of Cufon Font Replacement. If you have any problem comment below.

Must Read