Take the 2-minute tour ×

I am using the visualization library the charts works fine in Firefox/Chrome, however when I test in IE7 I am getting a different font showing up on the chart. Different computers yield different results.

So it is known, I am running IE9 but using the IE7 "browser mode" to test.

Also, I am using the new "corepackage" in Google Charts, so it utilizes both VML and SVG when needed so it does render in IE. But for whatever reason I get weird fonts in IE7.

Can anyone explain what might be happening?

Screenshot From Google: Full Image Graph

EDIT: Here is the script for the chart:

<script type="text/javascript">
              function drawChart() {
              var data = new google.visualization.DataTable();
      data.addColumn('string', 'Column1');
data.addColumn('number', 'Column2');

// Removed data for NDA puroses

var chart = new google.visualization.ColumnChart(document.getElementById('Project'));
var formatter = new google.visualization.NumberFormat(
               {prefix: '&#163;',
                negativeParens: true,
                decimalSymbol: '.',
                groupingSymbol: ','
chart.draw(data, {colors: ['#FFC6A5','#FFFF42','#DEF3BD','#00A5C6','#DEBDDE'], width: 600, height: 300, min: 0, max:0, is3D: false, legend: 'bottom', title: 'Project Variance', isVertical:true, isStacked:true});}google.setOnLoadCallback(drawChartProjectVariance);</script>
share|improve this question
add comment

2 Answers

Wrapping the font name in single, and then double quotes seems to fix the font issue (though it still displays in bold and italic, which there doesn't seem to be a way to fix).

e.g. -

var options = {'fontName' : '"Arial"'}

share|improve this answer
This worked for me as well. –  Nick May 8 '12 at 19:40
Awesome answer. I can only guess how many hours it took you to figure this out. Worked for me, tx. –  Fox Jul 31 '12 at 12:46
add comment

IE7 doesn't support SVG. You can see some alternatives in this thread:

What is a good alternative to SVG in IE7?

share|improve this answer
Then why does it show my graphs, just with odd fonts? –  Chris Aug 3 '11 at 18:13
@Chris Why don't you check the file extension in your address bar to see if Google is serving you PNGs? .. –  Brian Gordon Aug 3 '11 at 18:27
They still contain the hover/click effects and the SVG source is still preserved. –  Chris Aug 3 '11 at 18:45
@Chris Then that's IE9 doing it for you. Does IE9 without the IE7 compatibility mode on work for you? –  Brian Gordon Aug 3 '11 at 18:47
It does not. It shows the graphs in IE7 and IE8 compatibility mode, but not in native IE9. I planned on using SVGWeb anyways, but I'm more or less just looking for an explanation why it would "work" but have a random font in the element. If you want I can post a screenshot. –  Chris Aug 3 '11 at 18:51
show 2 more comments

Your Answer


