Tooltip title with custom font not rendering properly at first

I have a line chart and I want to set a custom font to it (of every part of the chart, from ticks to tooltip).

But I’m having issues with the tooltip title: the first time I hover a point in the chart, the tooltip title is showing the default font, and then in all the other attempts shows the correct one. Same thing happens every time I refresh my page: first attempt renders the title with the default font.

First time I hover a point after page refresh:

All other hover attempts:

However, notice the ticks and tooltip content already show the proper font the first time, the issue is happening only with the tooltip title!

This is how I’m setting the font, in the options object of the line chart:

const lineChartOptions = {
  responsive: true,
  defaultFontFamily: Chart.defaults.global.defaultFontFamily = 'fabriga',
  ...
}

I also tried setting specifically the tooltip title font, before defining my chart component:

import { defaults } from 'react-chartjs-2'
defaults.global.tooltips.titleFontFamily = 'fabriga'

And also tried to set it in the options object that gets passed to the chart:

const lineChartOptions = {
  ...
  tooltips: { titleFontFamily: 'fabriga' }
  ...
}

But the behavior is the same. Anyone know the reason of this? What am I doing wrong?

[shaunlandau1973]

I too noticed strange font flicker artifacts but only while dev tools are open and causing cached fonts to be reloaded. With dev tools closed robbieyng’s strategy does the trick.

[Pringels]

Closing for now. Please supply a sandbox or code example with the latest versions of both libraries. If the problem persists, feel free to open a new issue.