Cufon multiple fonts - How?

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

  •  03-10-2019
  •  | 
  •  

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

Was it helpful?

Solution

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?

OTHER TIPS

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>

<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
  Cufon.replace('h1');
</script>

<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
  Cufon.replace('h2');
</script>

This worked for me.

When you generate your Cufon font on their website, you specify a name to be used for your font.

Use the following value as the font-family of the generated font (optional)

You have to use that same name when calling Cufon, or it won't work properly. I think that might be the reason why your font replacement isn't working. That's the way Cufon knows what font you're referring to when you make the fontFamily call.

See: https://github.com/sorccu/cufon/wiki/usage

Using multiple fonts

To use multiple fonts you only need to specify which font you want to use and you’re set:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<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>
</head>
<body>
<h1>This text will be shown in Vegur.</h1>
<h2>This text will be shown in Myriad Pro.</h2>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top