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 openfontlibrary.org.

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.

scripts/cufon/cufon-yui.js
scripts/cufon/myfavoritefont_bold_300.font.js

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">
Cufon.replace('h1');
Cufon.replace('b');
</script>


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' })
</script>

CUFON AND IE9 ISSUE - SOLUTION


CUFON WEBSITE
DOWNLOAD LATEST CUFON LIBRARY
CUFON GENERATOR PAGE
DOWNLOAD SCRIPT IMPLEMENTATION
HOW CUFON WORKS

Other Interesting Stuffs:

sIFR
*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
http://openfontlibrary.org/

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.
like:

<link href='http://fonts.googleapis.com/css?family=Macondo+Swash+Caps' rel='stylesheet' type='text/css'>
read more..
Labels:

Comments

Post a Comment

Popular posts from this blog

Sachin Tendulkar's emotional farewell Speech at Wankhede Stadium, Mumbai - Full Text and Video

Full Text and Video of Sachin Tendulkar's emotional farewell Speech on Nov 16, 2014 On November 16, 2013 - Sachin Ramesh Tendulkar played his last international cricket match against West-Indies at the at Wankhede Stadium, Mumbai. After the match he gave an emotional farewell speech. No one would be able forget the speech. The eyes of the gathered people were tearfull. Through out the speech Sachin thanked each and everyone who supported and encouraged him to build up his glorius career which spanned 24 years.
Read more

How to loop through the items in a select box using Javascript?

Looping through the items in a select box using JS Use the code given below to parse through the options in a select box and alert the Text and Value of each options. you can alter the function as per your need. sample code is given below: <form> <select id="test" name="test"> <option value="First Value" >First Text</option> <option value="Second Value" >Second Text</option> <option value="Third Value" >Third Text</option> <option value="Fourth Value" >Fourth Text</option> <option value="Fifth Value" >Fifth Text</option> </select> <input type="button" value="Check" onclick="loopSelectBox('test')" > </form> <script> function loopSelectBox(selectBoxId){ var obj=document.getElementById(selectBoxId); for(i=0; i < obj.options.length ;i++){ alert("Value :...
Post a Comment
Read more

Autobiography by Cricket legend Sachin Tendulkar "Sachin Tendulkar - Playing it My Way : My Autobiography"

Autobiography by Cricket legend Sachin Tendulkar Cricket batting legend Sachin Ramesh Tendulkar's  autobiography was released on November 5, 2014 in a high profile launch function in Mumbai. . Earlier  on his Twitter page Sachin has announced the release date of his Autobiography " Sachin Tendulkar - Playing it My Way : My Autobiography "   as November 6th 2014 , but the book was released a day earlier. It took three years to write this book which he says as the Second innings of his life. Sachin Ramesh Tendulkar, the all time Genius of World Cricket was born on April 24, 1973 at Bombay (now Mumbai) in Maharashtra. He hold the record for scoring most runs and hundreds in Tests and ODIs. He scored a total of more than 34000 runs from One day Internationals (ODI's) and tests. He was part of the World cup winning team of 2011. He was a great all rounder. His  debut match was against    Pakistan  at Karachi during Nov 15-20, 1989. He played h...
Read more


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