2

I am trying to specify a custom CSS font for my chart, which is generated via the Google Visualization API. I've tried speccing the font both within my CSS style-sheet, as well as using the Google fonts.googleapis.com

within my Google Visualization API chartOptions:

var options = {
    fontName : 'FranchiseRegular',
    tooltip: { textStyle: { fontName: 'Verdana', fontSize: 12 } }
};

within my style.css:

@font-face {
font-family: 'FranchiseRegular';
src: url('/_fonts/franchise-bold-webfont.eot');
src: url('/_fonts/franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('/_fonts/franchise-bold-webfont.woff') format('woff'),
     url('/_fonts/franchise-bold-webfont.ttf') format('truetype'),
     url('/_fonts/franchise-bold-webfont.svg#FranchiseRegular') format('svg');
font-weight: normal;
font-style: normal;
}

within my HEAD tag:

<link href='http://fonts.googleapis.com/css?family=Magra:400,700' 
      rel='stylesheet' type='text/css'>

So, the Verdana call works great, all tooltips show correctly as Verdana. But the title, axis labels, and chart labels all kick out to TimesNewRoman. I'd like them to display as either the FranchiseRegular as specified in the CSS, or as Magra as specified in the HEAD tag.

I have thoroughly explored the options here: https://developers.google.com/chart/interactive/docs/gallery/bubblechart

And the heart of the question is, what is the proper syntax for 

fontName: <global-font-name>

If you could please supply the proper syntax for my fontName within the chartOptions to accomplish either of these, I would greatly appreciate. Thanks in advance! :)

AcroYogi
  • 317
  • 1
  • 4
  • 12
  • As for the style.css example, EOT is strictly an Internet Explorer party. http://reisio.com/examples/webfonts/ – reisio May 11 '12 at 20:21
  • often included fonts (via `@font-face`) use quotes around the name of the font so you might try something like `fontName: '\'FranchiseRegular\''` – MikeM May 11 '12 at 20:24
  • @reisio - you are correct, i had edited that for brevity... i do in fact include external font file references. i've edited the question, adding those for clarity. – AcroYogi May 11 '12 at 20:30
  • I've also looked here, no avail: https://developers.google.com/apps-script/class_textstyle – AcroYogi May 11 '12 at 22:47

1 Answers1

3

There's a related answer over here:

Font Family Selection With Google Charts?

The reason is that Google charts are drawn inside of an iframe, so any styles you set on your document will not apply to the charts. Until Google adds this to their API, there's no simple workaround.

EDIT:

I found an interesting work around... it doesn't work on older IE's, but there's an [undocumented?] option in the Google Visualization API that lets you render a chart directly into a page, without the intermediate iframe. In doing so, your chart can you use any font family that you have defined in your document.

The option is "forceIFrame" and you want to set it to false in your "options" hash (i.e. same hash as the fontName option).

Community
  • 1
  • 1
Mark E. Haase
  • 25,965
  • 11
  • 66
  • 72
  • @Ruffo Sorry I didn't notice your comment until just now. Unfortunately I don't have a standalone example, but I do have this deployed on http://scapsync.com/stats/count-types. You will see the chart is using Droid Sans to match the rest of my site. If you view source on that page, you can see that I set forceIFrame to false, and then the chart font is inherited from the style that I set on the element. – Mark E. Haase Jun 17 '13 at 18:52