score:17

Accepted answer

it is indeed possible.

considering you have imported your font (from googlefonts for instance),
you just have to edit the defaultfontfamily attribute in your chart options like this :

var options = {
    // 'raleway' is the name of the fond i imported from googlefonts
    defaultfontfamily: chart.defaults.global.defaultfontfamily = "'raleway'"
}

see lolka's answer for more information about the defaultfontfamily attribute.

a full working example:

chart.defaults.global.defaultfontfamily = "indie flower";
var ctx = document.getelementbyid("mychart");
var mychart = new chart(ctx, {
    type: 'bar',
    data: {
        labels: ["red", "blue", "yellow", "green", "purple", "orange"],
        datasets: [{
            label: '# of votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundcolor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            bordercolor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderwidth: 1
        }]
    },
    options: {
        scales: {
            yaxes: [{
                ticks: {
                    beginatzero:true
                }
            }]
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.1.6/chart.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=indie+flower' rel='stylesheet' type='text/css'>
  
<canvas id="mychart" width="400" height="400"></canvas>

score:1

first result for google chart.js custom font

from documentation:

there are 4 special global settings that can change all of the fonts on the chart. these options are in chart.defaults.global.

...

defaultfontfamily string "'helvetica neue', 'helvetica', 'arial', sans-serif" default font family for all text


Related Query

More Query from same tag