Cufon console error, not replacing font. (ReferenceError: Can't find variable: Cufon)

StackOverflow https://stackoverflow.com/questions/10353357

  •  04-06-2021
  •  | 
  •  

Question

My first attempt at using Cufon has caused me a few problems as I just can't seem to get it to work. The Coda's Javascript log is giving me this error (ReferenceError: Can't find variable: Cufon) From a few tutorials I have followed them precisely have been back and forth downloading the libraries over and over and nothing is working. If you guys could have a look and help me out, it would be much appreciated.

Here is my code;

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Test</title>
    <!-- Styles go here -->
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" href="css/style.css" />
    <!-- End styles here -->

    <!-- Scripts go here -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="scripts/A.font.js"></script>
    <script type="text/javascript" src="scripts/cufon.js"></script>

    <script type="text/javascript">
        Cufon.replace("p");
    </script>
    <!-- Scripts end here -->
</head>

<body>

<p>Test</p>
Test

</body>
</html>

Thanks.

Was it helpful?

Solution

This error occurred because you've loaded Cufon after the font has been loaded that requires it, so try to change the order, first load the cufon.js

<script type="text/javascript" src="scripts/cufon.js"></script>

and then load the A.font.js

<script type="text/javascript" src="scripts/A.font.js"></script>

OTHER TIPS

I know this doesn't directly answer your question, but please don't use Cufon. Use CSS 2.1's @font-face instead. It's very easy and 100% accessible whereas Cufon is not.

Here are the only 2 links you need to use @font-face in your CSS:

http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax http://www.fontsquirrel.com/fontface/generator

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top