Google Chartsカスタムフォントが正しくレンダリングされない - Firefox

Question

私たちはGoogle Chartsを使用して、私たちのウェブサイトでいくつかのビジュアライゼーションを作成しています。私たちのサイトは "ゴッサムA"と呼ばれる "カスタム"フォントを使用しています。フォントはロードされ、ウェブサイト、ボディーテキスト、そして他のすべてがうまくレンダリングされます。

私たちのチャートでは、X軸、Y軸、タイトルはすべてGotham Aフォントを使用しています。 IEとChromeでは、charts \ titleはフォントをうまく描画しますが、FireFoxは適切にレンダリングする方法を知らない。

以下は、レンダリングの仕方や、チャートをロードするためのスクリプトについての例です。これらのフォントをFireFoxで適切にレンダリングするのに役立つ設定を変更できますか？

ここでChromeのチャートのスクリーンショットです：

そして、ここでは、Firefoxで同じもののキャップだ：「契約販売 - 過去12ヶ月」を見てみましょう

、中Firefoxのバージョンでは、下位r、下位s、数字1と2のような文字の一部が正確に表示されません。軸の文字もどちらもありません。 、

function LoadChart(responseData, chartTitle, xType, xTitle, yType, yTitle, chartDOMObjSelector, chartTitleWidth) { 
    var chartFont = 'Gotham A'; 
    // Set chart options 
    var options = { 
     'title': chartTitle, 
     'width': chartTitleWidth, 
     'titleTextStyle': { color: '#606060', fontName: chartFont, fontSize: '14', bold: false, italic: false }, 
     'hAxis': { textStyle: { color: '#24597f', fontName: chartFont, fontSize: '10', bold: false, italic: false } }, 
     'vAxis': { textStyle: { color: '#24597f', fontName: chartFont, fontSize: '10', bold: false, italic: false } }, 
     'legend': { position: 'none' } // set Legend Position to None to hide it 
    }; 

    var data = new google.visualization.DataTable(); 
    //logic to add row data... 
    var chart = new google.visualization.ColumnChart($('#mychart')); 
    chart.draw(data, options); 
} 

Answer 1

これが役立つかどうかわからない
しかし、あなたはすべての要素が正しいfont-family

を持っていることを確認することができ

：ここ

たちはグラフのフォントやものを設定している方法です'ready'イベントが発生したとき...

var chart = new google.visualization.ColumnChart($('#mychart')[0]); 

google.visualization.events.addListener(chart, 'ready', function() { 
    $('text').attr('font-family', chartFont); 
}); 

chart.draw(data, options); 

Answer 2

同じ問題がありました。これは、名前にスペースを持つフォントに関連しています。私はBauhaus 93を使用していましたが、動作していませんでした。しかし、私が名前に一重引用符を含むように変更したとき、 'Bauhaus 93'はその後私のために働き始めました。