How to adjust font size with Cufon?

Question

I am using a condensed font in Cufon. When the page loads, my menu is too wide and wraps. Then Cufon replaces the font and it looks fine. To reduce the visual distraction, I want to set the font size smaller and then have Cufon change the font size when it displays.

Currently the font size is set by the div containing the menu. Here is the CSS for the menu container:

.header_menu_block
{
    display: block;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    margin-top: 3px;
    /*margin-left: 238px;  ie 6 can't handle, see margin block below*/
    float: left;
    text-align: left;
    font-weight: normal;
    font-size: 14px;
    color: #FFFFFF;
    height: 41px;  
    width: 991px;
}

The Cufon replacement code looks like this:

<script type="text/javascript">
    Cufon.replace('.header_menu_block_col_menu ', 
    { color: '#ffffff', 
      hover: {color: '#204966'}
    } );
</script> 

I've tried setting the CSS font size to 12px and then using the following Cufon code, but it does not work:

<script type="text/javascript">
    Cufon.replace('.header_menu_block_col_menu ', 
    { color: '#ffffff', 
      hover: {color: '#204966'},
      font-size:'14px'
    } );
</script>

Does anyone know how to do this?

Answer 1

Let me guess, you never see the underlying font in non-IE browsers, right? The non-cufon appears briefly first in IE? I've been dealing with the same issue and I solved it by having the div with the text fade into view with jQuery. The fade time can be set to appear very fast--200ms in this example, I think you can make it fade-in even faster.

 $(window).load(function(){$(".header_menu_block_col_menu").fadeIn(200);});

Don't forget to set the CSS for that div to display:none for the fade-in to work... Of course, if your viewer has Javascript disabled, then nothing will appear--but what percentage of visitors to your web site have js disabled?

And, worried about your Google ranking with display:none? Read more on Google Groups.

Answer 2

You could try using the set() method. I find that this works.

<script type="text/javascript">
    Cufon.set('fontSize', '14px').replace('.header_menu_block_col_menu ', 
    { color: '#ffffff', 
      hover: {color: '#204966'}
    } );
</script>

Although the manual explicitly suggests not using the font size.

https://github.com/sorccu/cufon/wiki/API

Answer 3

I did it changing my CSS as below

.cufon-active h1 { /* for Cufon.replace(‘h1′) */
  font-size: 3em;
  color: #FF0000;
}