Font Family Selection With Google Charts?

Question

Is it possible to set font-family for any of the non-flash Google chart visualizations? Specifically for things like the text on the chart axis. Google charts is powerful, but ugly. And unfortunately I can’t move to something nicer, like gRaphael.

Solution 1

Have a look to the textstyle properties, take for example the hAxis.textStyle:

hAxis.textStyle: { color: '#FF0000', 
                   fontName: 'Arial', 
                   fontSize: '10' }

Solution 2

You can change the font family like this - fontName: 'Arial'

chart.draw(data,{fontName:'Roboto'});

Solution 3

So, these are both technically accurate answers, but I wanted to add a little bit of context (that I couldn't add in comments because I don't have the appropriate reputation).

1. While using the object notation to pass in text styles for everything is great and definitely the preferred method for styling chart elements from Google's POV, you're ultimately limited by the font choices that Google puts in their font repository. So, one of those examples showing Segoe UI doesn't work, because Google doesn't have that in their repository. That's unfortunate, because I'm using the charts API within an Office Fabric UI application.
2. Another user suggested performing styling via CSS. This works... but on-screen only. The only way to print these graphs that I've found is to render them out as PNGs using this method. But, of course, that only grabs what's configured in the DOM element; it doesn't consider CSS, so printing tends to be unpredictable.

My solution was to directly change the elements within the SVG container using jQuery loaded in after the chart enters the "ready" state, but before they're rendered as PNGs:

google.visualization.events.addListener(chart,'ready',function(){
    var titleText = $('[chart-container] > div > div > svg > g:first-of-type > text:nth-of-type(1)');
    var subtitleText = $('[chart-container] > div > div > svg > g:first-of-type > text:nth-of-type(2)');
    var tooltipText = $('[chart-container] > div > div > svg > g > g').find('text');
    var tooltipStyle = {'font-family':'"Segoe UI SemiLight WestEuropean","Segoe UI SemiLight","Segoe WP SemuiLight","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif'};
    var otherText = $('g > text');
    var textStyle = {'font-family':"'Segoe UI SemiLight WestEuropean','Segoe UI SemiLight','Segoe WP SemiLight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif"};
    var titleStyle = {'font-size':'21px','font-family':'"Segoe UI SemiLight WestEuropean","Segoe UI SemiLight","Segoe WP SemuiLight","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif',fill:'#333'};
    var titlePos = {x:20,y:30};
    var subtitleStyle = {'font-size':'17px','font-family':"'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif",fill:'#666'};
    var subtitlePos = {y:50,x:20};
    tooltipText.css(tooltipStyle);
    otherText.css(textStyle);
    titleText.css(titleStyle).attr(titlePos);
    subtitleText.css(subtitleStyle).attr(subtitlePos);
});

There's probably a cleaner way to do all of that (I'm a hacky coder, at best), and I've still got some issues to work out, like fonts reverting when you hover and the tooltips not getting styled right, but that's the best way to ensure consistency between what's displayed onscreen and what, inevitably, your users are going to want to print.