How to Change the Font (Family) for the Labels in Chart.Js

How to add font family to Chart.js V3.7.0

For global use: Chart.defaults.font.family = "Lato".

Details here.

How can I change the font (family) for the labels in Chart.JS?

This should be useful: http://www.chartjs.org/docs/. It says "There are 4 special global settings that can change all of the fonts on the chart. These options are in Chart.defaults.global".

You'll need to change defaultFontFamily for the font. And defaultFontColor, defaultFontSize, and defaultFontStyle for color, size, etc.

Change font family of labels in piechart and linechart in chartjs

Since the font does not change it seems you are working with V3, v3 has some major braking changes like how scales got defined and changes in namespaces so are your title and legend config in the wrong place, also the way you define the font is wrong, for all the changes please read the migration guide.

Working example of changed font:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          font: {
            family: 'Comic Sans MS',
          }
        }
      },
    },
    scales: {
      x: {
        ticks: {
          font: {
            family: 'Comic Sans MS'
          },
          reverse: false
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Changing fontFamily on ChartJS bar chart

Add ticks.fontFamily to xAxes so it will look like this:

xAxes: [{
  gridLines: {
    display: false
  },
  ticks: {
    fontFamily: "Verdana",
  }
}],

Documentation: http://www.chartjs.org/docs/#scales

Example on jsfiddle: http://jsfiddle.net/4asLpwd5/

how to change default font family in react-chartjs-2

so after seeing a post in github, this way worked:
first import defaults:

import { defaults } from 'react-chartjs-2';

and then somewhere set font like this:

defaults.font.family = 'font name...';

Chart js. How to change font styles for labels array?

It's well hidden, but you can find this under "Point Label Options"

http://www.chartjs.org/docs/#scales-radial-linear-scale

here is a example:
https://jsfiddle.net/qvrt01jp/1/

options: {
    scale: {
        pointLabels :{
           fontStyle: "bold",
        }
    }
}

global should also work if set it like this:

Chart.defaults.global.defaultFontStyle = 'italic'

ChartJs: Is there a way to control the font options per line for a multiline axis label

You can use a plugin to redraw the ticks for you, might need some finetuning for your specific needs:

var options = {
  type: 'line',
  data: {
    labels: [
      ["Red", "subTitle"],
      ["Blue", "subTitle"],
      ["Yellow", "subTitle"],
      ["Green", "subTitle"],
      ["Purple", "subTitle"],
      ["Orange", "subTitle"]
    ],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'red',
      backgroundColor: 'red'
    }]
  },
  options: {
    plugins: {
      customTextColor: {
        color: 'blue',
        boxColor: 'white',
        fontStringSubTitle: 'italic 12px Comic Sans MS',
        fontStringMain: ''
      }
    }
  },
  plugins: [{
    id: 'customTextColor',
    afterDraw: (chart, args, opts) => {
      // Set all variables needed
      const {
        ctx,
        scales: {
          y,
          x
        }
      } = chart;
      const labelItems = x._labelItems;
      const {
        color,
        boxColor,
        fontStringMain,
        fontStringSubTitle
      } = opts;
      const defaultFontString = '12px "Helvetica Neue", Helvetica, Arial, sans-serif';

      for (let i = 0; i < labelItems.length; i++) {
        let labelItem = labelItems[i];

        if (!Array.isArray(labelItem.label)) {
          continue;
        }

        let metrics = ctx.measureText(labelItem.label);
        let labelWidth = metrics.width;
        let labelHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;

        //Draw box over old labels so they are inviseble
        ctx.save();
        ctx.fillStyle = boxColor || '#FFFFFF';
        ctx.fillRect((labelItem.translation[0] - labelWidth / 2), labelItem.translation[1], labelWidth, labelHeight * labelItem.label.length);
        ctx.restore();

        // Draw new text on canvas
        let offset = 0;
        labelItem.label.forEach(el => {
          let elTextMetrics = ctx.measureText(el);
          let elWidth = elTextMetrics.width;

          if (labelItem.label.indexOf(el) === 0) {
            ctx.font = fontStringMain || defaultFontString;
          } else {
            ctx.font = fontStringSubTitle || defaultFontString;
          }

          ctx.save();
          ctx.fillStyle = color || Chart.defaults.color
          ctx.fillText(el, (labelItem.translation[0] - elWidth / 2), labelItem.translation[1] + labelItem.textOffset + offset);
          ctx.restore();
          offset += elTextMetrics.fontBoundingBoxAscent + elTextMetrics.fontBoundingBoxDescent;
        });
      }

      // Draw white box over old label

    }
  }]
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>