Skip to main content

Cufon Library for using attractive fonts in website

The fonts used in websites for displaying titles, headings or subheadings have much importance in improving readability of the website. There are variety of pretty fonts available that can be used to render contents various HTML tags like H1,H2,B,I etc. One issue that could happen is, if the client machine doesn't have your applied font then it renders with available font. A very good and effective solution for this is the use of Cufon Library (Cufon Script) for rendering the HTML contents using your desired font. Cufon doesn’t use Flash technology (like sIFR*) to render fonts. Cufon simply changes selected text elements to the <canvas> HTML5 tag.

No plug-ins required for Cufon, it is fast and easy to implement, recent version of cufon script works with all major browsers.

It is simple to install Cufon script in your webpages.

At First, download the latest version of "cufon-yui.js" file from Cuffons website.

Next, download your favourite font from any of the web sources like

for using with cufon, the font shoulf be converted to JS format, for this take Cufon Generator page

In the "Regular typeface" field Browse for your font which was downloaded earlier and select it

Check the option "The EULAs of these fonts allow Web Embedding (without Adobe Flash)"

In the "Include following Glyphs" section, check the items upto "wordpress punctation" field omit rest if not needed.

Accept terms and click "Lets do this" button to generate the JS format of your font.

Upload this files to your Javascript files folder.


Next is to call this files in your web pages you can do it like this: include this in head section

<script src="scripts/cufon/cufon-yui.js" type="text/javascript"></script>
<script src="scripts/cufon/myfavoritefont_bold_300.font.js" type="text/javascript"></script>

You have to initialise the Cufon text replacement by calling following code - the code says Cufon must replace the contents in h1 and b tags with a html5 canvas tag and render the text with your desired font style.

<script type="text/javascript">

Similarly you can use multiple font for different tags:

<script src="scripts/cufon/cufon-yui.js" type="text/javascript"></script>
<script src="scripts/cufon/myfavoritefont_bold_300.font.js" type="text/javascript"></script>
<script src="scripts/cufon/myotherfavoritefont_italic_500.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'myfavoritefont' });
Cufon.replace('h2', { fontFamily: 'myotherfavoritefont' })



Other Interesting Stuffs:

*Scalable Inman Flash Replacement (sIFR) is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents.
Read more about sIFR JS Library

Web Font Sources

Google Web Fonts API
The Google Web Fonts API helps you add web fonts to any web page. Benefits of the Google Web Fonts API include: A choice of high quality open source fonts.
Google web fonts - For Free optimised web fonts from Google library which can be used in your website.

<link href='' rel='stylesheet' type='text/css'>
read more..


Popular posts from this blog

Payback Points - How to redeem - How to merge multiple payback accounts - Block Payback card - Payback customer care

Your SBI Debit card ending with XX0000 is deactivated only for Internet txn.

SBI account holders may have received an SMS with following message, supposed to be from State Bank of India (SBI).

Your SBI Debit card ending with XX0000  is deactivated only for Internet txn. To activate send SMS "SWON ECOM 0000" to 09223966666. No change for ATM/POS usage
** Replace the four Zeros with last 4 digits of your debit card number

Recently many of the SBI account holder has losed their money due to a hi-tech ATM robbery which happened in Thiruvananthapuram, capital city of Kerala.

Joomla and Forum Integration - Integrating Forums to Joomla

Joomla is one of the most popular CMS opensource packages. It is very easier to develop website's using Joomla. You just need to download Joomla package from Joomla's Official website  and install it on your domain and later adding customizations to templates and feature and Your website is ready :). Now a days most websites provides a forum section for it users for discussing various article topics, gathering opinions etc.

Following are some best know forum opensource packages which can be integrated with Joomla and create a new forum experience for users

Urgent Openings for PHP trainees, Andriod / IOS developers and PHP developers in Kochi Trivandrum Calicut and Bangalore. Please Send Your updated resumes to   Read more »
Search This Blog