Highcharts legend font sizes

Question

I'm using Highcharts for my web page and I can't seem to figure out how to correctly change the font size of the title and key at the bottom. I'm using the basic column with green background: http://www.highcharts.com/demo/column-basic/dark-green

Currently this is my code:

Function: 
$(function () {
    $('#content').highcharts({
        chart: {
            type: 'column'
        },
        legend: {
            itemStyle: {
                color: 'white',
                fontWeight: 'bold',
                fontSize: '20px'
            }
        },
        title: {
            text: 'Title',
            style:{
                    color: 'white',
                    fontSize: '25px'
                }       
        },
        subtitle: {
            text: 'Subtitle'
        },
         xAxis: {
            categories: [
                ' '
            ]
        },
        yAxis: {
            min: 0,
            title: {                    
                text: 'MMBTUs x 10,0000',
                style:{
                    color: 'white',
                    fontSize: '25px'
                }
            },
            labels: {
                style: {
                    color: 'white',
                    fontSize:'25px'
                }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '2009',
            data: [4900000]

        }, {
            name: '2010',
            data: [4900000]

        }, {
            name: '2011',
            data: [5500000]

        }, {
            name: '2012',
            data: [5200000]

        }]
    });
});

Html call:

<div id="content" style="min-width: 300px; height: 1000px; margin: 2px; margin-bottom: 3px"></div>

and as stated I'm using the Highcharts green theme provided by the website when you click view visual theme.

Now my problem is when I change:

legend: {
        itemStyle: {
            color: 'white',
            fontWeight: 'bold',
            fontSize: '20px'
        }

depending on how big my font size is the 4 values (2009, 2010, 2011, 2012) are either not visable or the move out of the box below the chart. The box itself doesn't resize (which it does in jfiddle which doesn't include the theme). The same thing happens with:

title: {
        text: 'Title',
        style:{
                color: 'white',
                fontSize: '25px'
            }       
    },

the color changes based on my value but the font size doesn't. Any help would be appreciated.

Answer 1

That theme uses font instead of fontSize. So, it's legend is defined as:

 legend: {
              itemStyle: {
                 font: '9pt Trebuchet MS, Verdana, sans-serif',
                 color: '#A0A0A0'
              },
              itemHoverStyle: {
                 color: '#FFF'
              },
              itemHiddenStyle: {
                 color: '#444'
              }

        },

If you define your's with both font and fontSize, it'll work (seems like a bug to me, but maybe it's a feature):

 legend: {
              itemStyle: {
                 fontSize:'20px',
                 font: '20pt Trebuchet MS, Verdana, sans-serif',
                 color: '#A0A0A0'
              },
              itemHoverStyle: {
                 color: '#FFF'
              },
              itemHiddenStyle: {
                 color: '#444'
              }

        },

I assume the title has the same thing going on.

http://jsfiddle.net/kHzr9/