Use next/font font-family in chart.js
Unanswered
Dwarf Crocodile posted this in #help-forum
Dwarf 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
@Dwarf 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.
Dwarf 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.
@Dwarf 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)?
Dwarf CrocodileOP
In the
layout.tsx I have declare const rubik = Rubik({ subsets: ["latin"] });@Dwarf 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.
Dwarf 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.
Dwarf 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
Dwarf 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
Dwarf 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;