title: How can I change the font (family) for the labels in Chart.JS?
body: <p>I want to change the font to something snazzier in my Chart.JS horizontal bar chart. I've tried the following, but none of it works:</p>
  
  <pre><code>var optionsBar = {
      . . .
      //fontFamily: "'Candara', 'Calibri', 'Courier', 'serif'"
      //bodyFontFamily: "'Candara', 'Calibri', 'Courier', 'serif'"
      //bodyFontFamily: "'Candara'"
      label: {
          font: {
              family: "Georgia"
          }
      }
  };
  </code></pre>
  
  <p>I also read that this would work:</p>
  
  <pre><code>Chart.defaults.global.defaultFont = "Georgia"
  </code></pre>
  
  <p>...but where would this code go, and how exactly should it look? I tried this:</p>
  
  <pre><code>priceBarChart.defaults.global.defaultFont = "Georgia";
  </code></pre>
  
  <p>...but also to no good effet.</p>
  
  <p>For the full picture/context, here is all the code that makes up this chart:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="chart"&gt;
      &lt;canvas id="top10ItemsChart" class="pie"&gt;&lt;/canvas&gt;
      &lt;div id="pie_legend"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>    var ctxBarChart = 
  $("#priceComplianceBarChart").get(0).getContext("2d");
      var barChartData = {
          labels: ["Bix Produce", "Capitol City", "Charlies Portland", 
  "Costa Fruit and Produce", "Get Fresh Sales",
  "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"],
          datasets: [
              {
                  label: "Price Compliant",
                  backgroundColor: "rgba(34,139,34,0.5)",
                  hoverBackgroundColor: "rgba(34,139,34,1)",
                  data: [17724, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 
  25553]
              },
              {
                  label: "Non-Compliant",
                  backgroundColor: "rgba(255, 0, 0, 0.5)",
                  hoverBackgroundColor: "rgba(255, 0, 0, 1)",
                  data: [170, 10, 180, 140, 30, 10, 50, 100, 10]
              }
          ]
      }
  
      var optionsBar = {
          scales: {
              xAxes: [{
                  stacked: true
              }],
              yAxes: [{
                  stacked: true
              }]
          },
          //fontFamily: "'Candara', 'Calibri', 'Courier', 'serif'"
          //bodyFontFamily: "'Candara', 'Calibri', 'Courier', 'serif'"
          //bodyFontFamily: "'Candara'"
          //Chart.defaults.global.defaultFont = where does this go?
          label: {
              font: {
                  family: "Georgia"
              }
          }
      };
  
      var priceBarChart = new Chart(ctxBarChart, {
          type: 'horizontalBar',
          data: barChartData,
          options: optionsBar
      });
      //priceBarChart.defaults.global.defaultFont = "Georgia";
  </code></pre>
  
  <p>I even tried this:</p>
  
  <p>CSS</p>
  
  <pre><code>.candaraFont13 {
      font-family:"Candara, Georgia, serif";
      font-size: 13px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="graph_container candaraFont13"&gt;
      &lt;canvas id="priceComplianceBarChart"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...but I reckon the canvas drawing takes care of the font appearance, as adding this made no difference.</p>
  
  <h2>UPDATE</h2>
  
  <p>I tried this and it completely broke it:</p>
  
  <pre><code>Chart.defaults.global = {
      defaultFontFamily: "Georgia"
  }
  </code></pre>
  
  <h2>UPDATE 2</h2>
  
  <p>As Matthew intimated, this worked (before any of the chart-specific script):</p>
  
  <pre><code>Chart.defaults.global.defaultFontFamily = "Georgia";
  </code></pre>