What is Ufon and what is it for?

Question

Recently when I was viewing the source code of an old Wordpress theme, I came across a code Avascript that contained the following:

Cufon.replace('#navigation > ul > li > a', {
    textShadow: '1px 1px rgba(0, 0, 0, 0.2)',
    hover: {
        color: linksColor
    }
});

This was just one of the places I met this guy cufon, but I also found it in several other places throughout the Java code. Which led me to the question - What is cufon?

Answer 1

The Cufon is an API whose function is to replace javascript fonts.

Using HTML5 and CSS3 you can use font-face instead of Cufon as discussed here.

Answer 2

Cufon is an old way of using "unsafe" fonts before the @font-face.
She was a Javascript technique used as an alternative to Webfonts and sIFR.

What it does is superimpose real text with an image, so that we keep the text for SEO, and at the same time see a nice font (which is an image). Cufon has always been very limited in terms of CSS, which was one of its constraints and which was quite insecure.

How to use it and where I can see an example?

The first thing we need to do is download the Avascript file responsible for rendering your custom HTML source. As @psNytrancez already mentioned, we can download through the link - Cufon Generate

Step 2 - Generate the source

On this very page: http://cufon.shoqolate.com/generate/ - click on the "Regular typeface" field - and navigate to the desired source directory on your local machine.

Step 3: "Cufonize" your page

All you need to do from this point on is connect these javascript files to your HTML document (as is usually done with the jQuery library for example). Also make sure that the Cufon-Yui.js is called before the file font.js:

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

To start the substitution process - create a script customized as in the example below:

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

With the jQuery library implemented, you can select more specific elements on your page as in the code example below:

<script type="text/javascript">  
    Cufon.replace('h3#convert-me, p#convert-me-too');
</script>

source of images and instructions - Cufonize Your Pages