Use next/font font-family in chart.js
Unanswered
African Slender-snouted Crocodil… posted this in #help-forum
African Slender-snouted CrocodileOP
Hello 👋
I'm using
I can change the default font with
but the fallback font is always used.
Does anyone of you maybe dealt with the same issue and can give me an advice?
I'm using
chart.js / react-chartjs-2 in my project and I would like to use the font from the next/font/google package in my chart.I can change the default font with
import { defaults } from "chart.js";
defaults.font.family = `'${rubik.className}', sans-serif`;but the fallback font is always used.
Does anyone of you maybe dealt with the same issue and can give me an advice?
19 Replies
@African Slender-snouted Crocodile Hello 👋
I'm using `chart.js` / `react-chartjs-2` in my project and I would like to use the font from the `next/font/google` package in my chart.
I can change the default font with
import { defaults } from "chart.js";
defaults.font.family = `'${rubik.className}', sans-serif`;
but the fallback font is always used.
Does anyone of you maybe dealt with the same issue and can give me an advice?
Declare a css variable for the font
and use var(--the-css-variable) as the font family name – this should work.
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
})and use var(--the-css-variable) as the font family name – this should work.
African Slender-snouted CrocodileOP
Thank you! It seems to work partly..
At least it isn't showing the serif font.
const rubik = Rubik({ subsets: ["latin"], display: "swap", variable: "--font-rubik" });
defaults.font.family = "var(--font-rubik), serif";At least it isn't showing the serif font.
@African Slender-snouted Crocodile Thank you! It seems to work partly..
const rubik = Rubik({ subsets: ["latin"], display: "swap", variable: "--font-rubik" });
defaults.font.family = "var(--font-rubik), serif";
At least it isn't showing the serif font.
Did you also use rubik.variable in the className of a higher html element (usually html or body)?
African Slender-snouted CrocodileOP
In the
layout.tsx I have declare const rubik = Rubik({ subsets: ["latin"] });@African Slender-snouted Crocodile In the `layout.tsx` I have declare `const rubik = Rubik({ subsets: ["latin"] });`
You need to use the same rubik object for both.
@joulev You need to use the same rubik object for both.
African Slender-snouted CrocodileOP
did not help unfortunately. but i'm not sure if it is a nextjs problem. i think i have to dig deeper into chartjs
you are right, just looked into it, chart.js uses <canvas> so doesn't respect css variables. sorry can't help here.
African Slender-snouted CrocodileOP
I found out, that NextJS generates a name for the font-family. If I use the name everythings works as intended. But I guess, that the font name is kind of random. Is there a way to set a specific font-name?
You don't have to use tailwindcss, but it will give you a idea
on how it works
African Slender-snouted CrocodileOP
variable wont' work, because i can't use it in the canvas
but i need to change the font-family name which is generated by nextjs
I added this lines to my
but nextjs keep adding some random number to the font name
tailwind.config.ts:fontFamily: {
rubikMonoOne: ["var(--font-rubikmonoone)"],
},but nextjs keep adding some random number to the font name
African Slender-snouted CrocodileOP
i cannot use the css variable, i need to use the font family name. canvas does not support css variables
nevermind 😄
i figured it out:
i figured it out:
const rubikMonoOne = Rubik({
subsets: ["latin"],
weight: ["400"],
});
defaults.font.family = rubikMonoOne.style.fontFamily;
defaults.font.size = 14;