4

I am working with Google Charts and customizing design for making it more beautiful.

But on embedding font faces in the Google Charts, I am getting an error within the Firebug console, which I am unable to understand. Firebug shows this error:

"NetworkError: 400 Bad Request - http://fonts.googleapis.com/css?family=hand_of_seanregular%7CInterstateRegular%7CInterstateRegular%7CInterstateRegular%7CInterstateRegular"

Good news is that the font is visible. From the error I think it's forcing the font to be a Google font but I am using a font face.

What I am writing is this:

textStyle : { 
    color: '#fff',
    fontName: "InterstateRegular",
    fontSize: 16,
    bold: false,
},

Could anyone tell me what mistake I am doing?

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
SaurabhLP
  • 3,619
  • 9
  • 40
  • 70
  • Interstate is not a web safe font (http://en.wikipedia.org/wiki/Web_typography#Web-safe_fonts) and won't be visible for the majority of users. I suggest you select a font which is available on Google Fonts (https://www.google.com/fonts), which solves your error and makes your chart look like intended on all/most clients. – udondan May 06 '15 at 07:25
  • @udondan Can't we use Embedded Font Face in Google Charts for it? Is it compulsory to use Google Font only? – SaurabhLP May 06 '15 at 08:21

1 Answers1

1

webfont.js seems to call insertBefore() which in turn loads a Google Font. So the solution is to override the default insertBefore() function, look for href string that matches the one giving you an error and then return early - otherwise call the default insertBefore()

Code here: Google Maps v3 - prevent API from loading Roboto font

user2676922
  • 11
  • 1