How can I change the font (family) for the labels in Chart.JS?
<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>