Home » Display your text with beautiful fonts using CUFON

Categorised in: Better Web Experience, Tutorial

Not so long ago, if you wanted to display nice thick crispy fonts on your site you had to create images of your text.

Then appeared nice solutions such as sIFR, facelift or other image replacement techniques. All with pros and cons, of course, but all facing problems in particular browser!

And now, here comes Cufón!

This is an alternative which is becoming a standard nowadays. Despite the merits of sIFR, Cufón is much easier to deploy and brings some interesting improvements:

  • No plug-ins required,
  • Works on every major browser on the market,
  • Easy to use,
  • very little configuration needed for standard use cases,
  • Rapid,
  • No impact on SEO.

Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript. Cufón has been tested in Internet Explorer 6, 7 and 8, Mozilla Firefox 1.5+, Safari 3+, Opera 9.5+ & Google Chrome.

It has been designed with developers in mind. Therefore the API is simple and configuration is usually not needed at all, as most of the needed information is provided by CSS style sheets.

Implementation

In order to function, we need to use the font converter utility on the Cufón website. Alternatively, you may download the source code and convert your fonts locally.

The Implementation is pretty easy:

  1. Download Cufon (recommended the YUI-compressed version)
  2. Generate your personalized font
 Don’t forget the glyphs

3.  Replacing the text:

[html]
<script type=”text/javascript” src=”cufon-yui.js”></script>
<script type=”text/javascript” src=”molot.cufonfonts.js”></script>
<script type=”text/javascript”>
Cufon.replace(‘h1’); // replace as necessary
</script>
[/html]

For the first line you can use the online version of the library.

[html]<script src=”http://cufon.shoqolate.com/js/cufon-yui.js” type=”text/javascript”></script> [/html]

As you can see, no jQuery like library is used so far.

Avoid delay display in IE by adding this line just before body closing tag:

[html toolbar=”true”]<script type=”text/javascript”> Cufon.now(); </script>[/html]

Of course, you can use JQuery selectors to target specific pieces of your design.
Don’t forget then to import the JQuery library!

[html] Cufon.replace(‘#mydiv h2’); [/html]

We use Cufón on this site ! Check the posts titles for example.

Check this site out http://www.cufonfonts.com/ as it contents ready to use Cufón fonts, so you can skip the generation process.

A tiny sample of the library.

Leave a reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.