Recently when I was to see the source code of an old Wordpress theme, I came across a javaScript code 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 where I found this cufon , but I also found it in several other places along the javaScript code. Which led me to the question - What is cufon ?
Cufon is an old way of using "unsafe" fonts before @font-face appears.
It was a JavaScript technique used as an alternative to WebFonts and sIFR .
What it does is to overlay the actual 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 restrictions and was quite insecure.
The first thing we need to do is download the javaScript file responsible for rendering your custom font from your HTML. As @psNytrancez already mentioned, we can download it through the link - Cufon Generate
Onthissamepage: link - click on the field "Regular typeface" - and navigate to the directory of the desired source in your local machine.
All you need to do from this point is to connect these javascript files to your HTML document (as you normally do with the jQuery library for example). Also make sure that Cufon-yui.js is called first font.js :
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Gigi_400.font.js"></script>
To start the replacement process - create a% custom_customer as in the example below:
<script type="text/javascript">
Cufon.replace('h3, p');
</script>
With the jQuery library deployed, 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>
sourceofimagesandinstructions- Cufonize Your Pages