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>

Answer 2

It knows because your Vegur_300.font.js file contains a Cufon.registerFont command that contains the font-family object parameter (in face).

As long as all your font .js files are executing, Cufon is getting the registration information with the curve data for each font. As to why it's not working for you, I can't speculate without more information. Do you have a sample site up?