CSS Rule: Cufon Multiple Fonts Using Same Font with Different Weights

Someone asked me a question about using a Cufon generated font with two different weights. We know that Cufon works for multiple fonts but when he tried to use the different weights of the same font, it sounded like it didn't work for him. I don't have Myriad Pro on this computer so I am going to test this idea with the ubiquitous MS Trebuchet, in regular and bold.

In Windows find the fonts under Control Panel fonts and copy them to your desktop. In my case, the names of the files are trebuc.ttf and trebucbd.ttf. Then go to the Using Cufon post or use this link to generate the fonts at Cufon's site.

<script src='http://pics.cssrule.com/pics/Trebuchet_MS_400-Trebuchet_MS_700.font.js' type='text/javascript'/>

Cufon placed both of the fonts in the same Javascript file. That's fine. I opened the .js file above in Wordpad to get the names of the fonts. They used the same name for both weights. We have to know how to express the bold font in Cufonspeak. I check their documentation for their API to find out about a parameter named fontWeight. Problem solved.

<script type="text/javascript">
Cufon.replace('p.mstest',{fontFamily: 'Trebuchet MS'} );
Cufon.replace('p.mstest2',{fontFamily: 'Trebuchet MS', fontWeight:'bold'} );
</script>

Simple color styling for the two classes. You don't even have to do this:
.mstest, .mstest2 { color: #817BBA; }

The HTML for testing:

<p class="mstest">
Testing the p.mstest font - This is Cufon generated Trebuchet MS</p>
<p class="mstest2">
Testing the p.mstest2 font - This is Cufon generated Trebuchet MS Bold</p>

The output:

Testing the p.mstest font - This is Cufon generated Trebuchet MS

Testing the p.mstest2 font - This is Cufon generated Trebuchet MS Bold

So you can make Cufon work for the variants of the same font family.

CSS Rule

Wednesday, May 04, 2011

Cufon Multiple Fonts Using Same Font with Different Weights

CUFON

2 comments: