Custom Fonts using Cúfon

Introduction

Cufón is a Javascript system that allows the use of custom fonts on webpages, and is often a simpler, more compatible approach the use @font-face tags.

Cufón is a text replacement system, and thus any text that is styled using it will not be able to be copied into the clipboard. Due to this issue, we recommend that Cufón is restricted to headings, and cosmetic text, rather than large paragraphs. @font-face is better for larger areas.

There is a very good tutorial here....

http://wiki.github.com/sorccu/cufon/usage

Get Cúfon

It is highly recommended that you always use the YUI-compressed version of cufón, available from the cufón website.

To install, download, and simply drag the 'cufon-yui.js' to the Site Manager to install it.

Reference this file in your page using the Page Attributes popup.


Creating a Cúfon JS file

Follow the steps at the following website...

http://cufon.shoqolate.com/generate/

Install the JS file

Drag the resulting .js file that Cúfon created to the Site Manager

Again, reference this file in your page using the Page Attributes popup.

Add some JS to your page

Add some JS code to your HEAD element, this can also be done via the Page attributes sheet.


<script type="text/javascript"> Cufon.replace('h1'); </script>

Done

Any text using the H1 style will now adopt your new custom font!

Get cool fonts

http://www.dafont.com/ is great source for free fonts.