How to adjust font size with Cufon?

Posted by user77413 on Stack Overflow See other posts from Stack Overflow or by user77413
Published on 2011-02-11T23:24:25Z Indexed on 2011/02/11 23:25 UTC
Read the original article Hit count: 244

Filed under:

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?

© Stack Overflow or respective owner

Related posts about cufon