Cufon multiple fonts - How?

Question

I am trying to implement 2 cufon fonts on the same page for the first time. Its not working.

In the documentation this is provided as an example:

            <script src="Vegur_300.font.js" type="text/javascript"></script>
    <script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
    <script type="text/javascript">
                    Cufon.replace('h1', { fontFamily: 'Vegur' });
        Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
    </script>

The thing I dont understand is - what is the link between fontFamily: 'Vegur' and the actual Vegur_300.font.js file?

In other words, how does the browser know that 'Vegur' is that particular file?

thanks in advance

Answer 1

Its very simple, lets suppose you are using 2 font families "Segoe UI" and "Bauhaus 93" then place the scripts as shown below:

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Segoe_UI_400.font.js" type="text/javascript"></script>
<script src="js/Bauhaus_93_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Segoe UI' });
Cufon.replace('h2', { fontFamily: 'Bauhaus 93' });     
</script>