Q:

Google Charts API "Uncaught Error: one or more fonts could not be loaded."

I'm embedding a chart made with Google's visualization API on my site. In doing so, I've put the following code in an iframe as a file called chart.html:
<html>
  <body>

    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
    <div id="chart_div"></div>
    <br/>
    <script type='text/javascript'> ... a whole bunch of Google Chart code which produces a bar, column or line visualization ... </script>
  </body>
</html>

This works perfectly fine on JS Fiddle, but does not work on my chart.html file, instead I get an error that says "one or more fonts could not be loaded" from a file that Google Charts API includes.

A:

Google Charts API for some visualizations requires a <head></head> element on the page. When it goes to load fonts - they are necessary whether you have instructed it to or not - it tries to append some font references to your header, but since your head is missing, it throws that error and then renders nothing in the chart's place.
It is easily fixed by adding a head element right after your HTML tag.

