I have a Next.js personal website that I want to add features to. One of these features is a Chart using Chart.js + React-Chartjs-2. I use App Router.
The issue is that the fonts used in the chart defaults to
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
But I want to use
"'Saira Extra Condensed', sans-serif"
The Saira font is imported in layout.tsx where it is imported using google.
import { Saira_Extra_Condensed } from 'next/font/google'
And is implemented by inside the layout.tsx:
const Font = Saira_Extra_Condensed({
weight: ['400', '500', '600', '700'],
subsets: ['latin']
});
...
<body className={Font.className}>
The docs say to implement it as such:
plugins: {
legend: {
position: 'top',
labels: {
font: {
family: "'Saira Extra Condensed', 'san-serif'"
}
}
},
title: {
display: true,
text: stockPredictionData.attributes.company_name + ' Stock Predictions',
font: {
family: "'Saira Extra Condensed', 'san-serif'"
}
}
}
But it resorts to Times New Roman. I’m assuming it cannot find the font-family but I cannot figure out why. I found out that if I used ‘Roboto’ or ‘Roboto Condensed’ it actually finds the font and uses it.
I have tried importing the font into my css files, but still won’t work.
I have tried forcing the canva element to use the font in css, but that didn’t work either.
Any tips or advice is appreciated.