css - 如何在Google Visualization API中指定自定义CSS字体/字体家族？

我正在尝试为我的图表指定自定义CSS字体，该字体是通过Google Visualization API生成的。我已经尝试在CSS样式表中以及在Google fonts.googleapis.com中指定字体

在我的Google Visualization API chartOptions中：

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

在我的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;
}

在我的HEAD标签中：

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

因此，Verdana调用效果很好，所有工具提示均正确显示为Verdana。
但是标题，轴标签和图表标签全部显示在TimesNewRoman中。
我希望它们显示为CSS中指定的FranchiseRegular或
在HEAD标记中指定的Magra。

我已经在这里彻底探讨了各种选择：
https://developers.google.com/chart/interactive/docs/gallery/bubblechart

问题的核心是，什么是正确的语法

fontName: <global-font-name>

如果您可以在chartOptions中为我的fontName提供正确的语法以完成上述任一操作，我将不胜感激。提前致谢！ :)

最佳答案

在这里有一个相关的答案：

Font Family Selection With Google Charts?

原因是Google图表是在iframe中绘制的，因此您在文档上设置的任何样式均不适用于该图表。在Google将其添加到其API之前，没有简单的解决方法。

编辑：

我发现了一个有趣的解决方法……它不适用于较旧的IE，但是Google Visualization API中有一个[undocumented？]选项，可让您直接将图表呈现到页面中，而无需中间iframe。这样，您的图表便可以使用您在文档中定义的任何字体系列。

选项为“ forceIFrame”，并且您想在“选项”哈希中将其设置为false（即与fontName选项相同的哈希）。