[Line chart] X and Y axis and tooltip fonts are being set only after hovering the chart

[bagratinho]

I'm trying to set a Google Font on the canvas, its embed in the separate css file. What happens is that the charts takes the default browser font at the initial rendering, and right font appears only after hovering on any chart point for tooltip to appear and then moving the mouse out of the chart.

See example: https://codesandbox.io/s/xpqvy2ojkw

import React from "react";
import ReactDOM from "react-dom";
import { Line } from "react-chartjs-2";

import "./styles.css";

function App() {
  return (
    <Line
      options={{
        tooltips: {
          displayColors: false,
          backgroundColor: "black",
          enabled: true,
          mode: "single",
          bodyFontSize: 15,
          bodyFontFamily: "Gamja Flower",
          bodyFontColor: "white",
          yPadding: 5,
          xPadding: 15,
          cornerRadius: 4,
          bodyFontStyle: "bold",
          callbacks: {
            title: () => {
              return "";
            },
            label: (tooltipItems, data) => {
              return tooltipItems.yLabel;
            }
          }
        },
        legend: {
          display: false
        },
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
          }
        },
        scales: {
          yAxes: [
            {
              gridLines: {
                drawBorder: true,
                color: "pink",
                zeroLineColor: "pink"
              },
              ticks: {
                fontColor: "green",
                fontFamily: "Gamja Flower",
                fontSize: 10,
                fontStyle: "bold"
              }
            }
          ],
          xAxes: [
            {
              gridLines: {
                display: false
              },
              ticks: {
                fontColor: "blue",
                fontFamily: "Gamja Flower",
                fontSize: 12,
                fontStyle: "bold"
              }
            }
          ]
        },
        maintainAspectRatio: false,
        animation: false
      }}
      data={{
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July"
        ],
        datasets: [
          {
            label: "dataset",
            fill: true,
            lineTension: 0,
            borderColor: "red",
            borderCapStyle: "butt",
            borderWidth: 1,
            borderJoinStyle: "miter",
            pointBorderColor: "red",
            pointBackgroundColor: "red",
            pointBorderWidth: 1,
            pointHoverRadius: 2.5,
            pointHoverBackgroundColor: "red",
            pointHoverBorderColor: "blue",
            pointHoverBorderWidth: 6,
            pointRadius: 1.5,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40]
          }
        ]
      }}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[bagratinho]

[dangreen]

Chart (canvas) should be initialized after the font is loaded. You can use this guide.