Using Cufons in Your Web Page

Introduction

With the internet growing so rapidly, people have begun using fonts in CSS and HTML to display text properly. Like the internet, Operating System evolution has began. The fonts that are supported in the browser of one operating system are different from the fonts supported in other operating systems. For example, Times New Roman is supported in Microsoft and Helvetica in Mac. As a programmer if I use a font that is only supported by Microsoft then it is difficult for me to realize what will happen in the future if a new operating system or new browser does not support it.

Using Cufons has become less common in commercial websites but if your website needs some special kind of fonts other than what Google web fonts offer, consider this a possibility.

sFIR (scalable Flash Inman Replacement)

Considering this in mind, Adobe Flash labs brought a concept called sFIR in the year of 2008, developed by Mike Davidson and improved by Mark Wubben. Adobe Flash called the concept "dynamic web fonts implementation’ that replaces text in HTML web pages with Flash equivalent text. This required a Flash installation and enabling by JavaScript. If Flash or JavaScript is not supported, the browser will render the default font written in the CSS or HTML. Flash is a plugin and the browser sometimes disables it. A plugin takes time to load in the page. With the mobile internet dominating the web world, it is not possible for developers to depend only on Flash. Thank God, Cufons came to the picture.

What can Cufons can do

Cufons are intended to replace the disadvantages of sFIR, we can call a replacement of sFIR of Adobe Flash.

Cufon requires no plugins to be installed on the client's browser. It is fast and compatible with all the major browsers in the market. It is easy to use.

The no plugin concept

Cufon consists of the following two individual parts:

• The generator.
• The rendering engine written in JavaScript.

Here the font you use in your system or web page is converted to a SVG font using an outline font editor called FontForge. The SVG Font is parsed and converted to VML paths. From IE5 to IE9, these VMLs are supported but in IE10, since HTML5 has arrived, we need to use a canvas.

The rendering engine is of JavaScript and JavaScript can be rendered in any browser. Thus using a stylish font with curely edges has become simpler.

How to use Cufons in a web page

1. Visit http://cufon.shoqolate.com/generate/ .
2. Download the cufon-yui.js file by clicking the download button.
3. Select the font you want to be cufonized.
4. Read all the instructions and choose whatever you want the font to be or to do.
5. Accept the terms and conditions and click on "Let's do it".
6. A .js file with your uploaded font name will be generated and save it.
7. Add a reference to both of the .js files in the head section.
8. Whatever font you want to replace, just use the following syntax:
   Cufon.replace(‘h2,p’).
9. Cufon is applied.

Download the Cufon

Upload the font to be cufonized and accept the terms and conditions after reading all the fields and selecting whatever you want. Then click on "Let's do it".