Cufón Font Replacement

Cufón is a font replacement technique for displaying non-standard fonts on a webpage. It is an alternative to sIFR but uses JavaScript to embed the font instead of Flash. It is also easier to set up and lighter in size than sIFR but still has the problem of copyright issues.

Downloading Cufón

First of all you need to download the main Cufón file. Go to , right click the download button and save the file to your desktop for now.

cufon download Cufón Font Replacement

Converting the Font

To be able to use the font on your website you will need to use the Cufón font converter. Click the Browse button to find the font you would like to use. If you want to use the bold and italic version of the font, upload them as well. Windows users will have to copy the font files they need out of the fonts folder to be able to upload them.

Next you will need to choose the glyphs that you want to be included. Choosing ‘All’ will increase the size of the JavaScript file dramatically, so just tick Uppercase, Lowercase, Numerals, Punctuation and WordPress Punctuation (If you are using WordPress).

Leave the other settings as default as they aren’t really needed to get Cufón working. Then accept the terms and click ‘Lets Do This’ to download the generated script file. Save this file to your desktop for easier access.

Adding Cufon To Your Website

Now you need to copy both the JavaScript files downloaded from Cufón into a folder called ‘js’ inside your local website folder. Once you have done this, open up the index file and add the following code to the bottom of the page just before the closing body tag.

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

Calling The Script

After copying the code into the page you now need to define what tags will have the font applied to. To do this, copy the following code below and paste it after the two JavaScript files.

<script type="text/javascript">

The code above will only replace the H1 text but you can add more tags after the H1 making sure you separate them with commas.

Unfortunately IE needs a bit of extra code to get it to render the Cufón text without a delay. Add the code below under everything else to fix the IE delay.

<script type="text/javascript">; </script>

Targeting Specific Elements

If you only want to change the headings in a specific element on your page then you can do so using jQuery. All you need to do is put the import code before Cufón like this:

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

Then you just need to define the element on the Cufón replace line.

Cufon.replace(‘#header h1′);

That’s all there is to it. Now you can upload all the files and see it in action.

Related posts:

  1. How To Speed Up Your WordPress Blogs


Leave a Reply

Contact Us Today...

If you have any questions about our services or want to arrange a free no obligation consultation contact us today or call 02920 290 080 for Cardiff and 01179 000 482 for Bristol.

Bit Torrent Study Discovers Most File Sharers Are Now Monitored

Ever heard of torrents or used Bit Torrent to download movies, music or shared files over the internet? Researchers have discovered that anyone who does use Bit Torrent to download files over the World Wide Web will most probably be monitored. Studies were carried out by Birmingham University and they have discovered that if someone [...]
» more

Cardiff: 02920 290 080 Bristol: 01179 000 482