Getting a simple cufon script to work

Question

I am new to cufon and i am facing some problems in getting it to work. I am trying to get the cufon to work with my html. I am trying a basic script(like changing the h1 tag to different font).

Example:

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script type="text/javascript" src="{{STATIC_URL}}js/cufon-yui.js"></script>
   <script type="text/javascript">
        Cufon.replace('h1',{font-family: "Tahoma"});
   </script>

The h1 tag doesn't seem to change. Not sure where the error is. I have already included the jquery lib, cufon js but it doesn't work. Need some guidance.. Thanks...

Answer 1

You need to convert the font you want to use into a js file by using the tool on http://cufon.shoqolate.com/generate/.

After that, you just need to link to it (assuming you want to use tahoma and {{STATIC_URL}} gets turned into a correct path):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}js/cufon-yui.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}js/tahoma.js"></script>
<script type="text/javascript">
    Cufon.replace('h1');
</script>

Don't forget to add <script type="text/javascript"> Cufon.now();</script> just before the closing </body> tag to make IE behave. More info can be found on https://github.com/sorccu/cufon/wiki/Usage.