Customize your fonts with Cufon Font Replacement

Here in Bootyard, we use css to style fonts for our websites or apps. But then, they still look boring and common especially when we get to visit some good-looking websites where they have custom style of texts. We’re pretty sure that it weren’t just done with the use of css. So, how did we do this?

A developer will immediately use @font-face. But the availability of this feature is limited, so we still prefer to use Cufon.

What is Cufon? Cufon is a font-replacement technique that uses javascript and vector graphics to write fonts from a font file (TTF, OTF or PFB) to your browser.

Setting up cufon for your site is easy:

Step 1: Download the cufon library

Go to cufon’s and download their javascript library.

Step 2: Choose and download your font

Find some nice fonts with OTF, TTF, or PFB filetypes from font squirrel. For example purposes, we downloaded the Angelina font style.

Step 3: Convert it

Convert the downloaded file to javascript. To do this, go to the cufon’s converter utility and then upload the necessary files. Don’t forget to check the checkbox labeled ‘The EULAs of these fonts allow Web Embedding’

Step 4: Conversion options

There are number of options available for the font conversion, one of them is to choose the glyphs which should be included. Don’t just check ‘All’ since it may increase the size of the converted javascript file. Just choose those that you will need. In our case, we only checked the ones you see below. After that, accept the terms and hit the submit button. You will be asked to download the converted javascript file, save it to your local machine.

Step 5: Add it in your project

Put the downloaded files (cufon font library and converted javascript file) to your project folder. Add it in your html’s header part.

Step 6: Calling it.

Now select the elements that you wish to customize. We usually use it in headings.

Cufon.replace(' h1, h2, h3, #cufon-area h4, .cufon-font ');

And that’s it! Happy Coding! =)

Originally published at https://www.bootyard.com on November 23, 2011