I am using 2 localfonts in my next.js app! 1. Circular Pro and 2. Avant Garde. Circular Pro is default while Avant Garde is for headings! I created fonts.ts and added fonts like this:
export const circularPro = localFont({
src: [
{
path: "../fonts/circular-pro/lineto-circular-pro-book.woff2",
weight: "400",
style: "normal",
},
{
path: "../fonts/circular-pro/lineto-circular-pro-bold.woff2",
weight: "700",
style: "normal",
},
],
display: "swap",
variable: "--font-circular-pro",
});
And this is how I added fonts in layout.tsx:
<body
className={cn(
circularPro.className,
avantGarde.className,
"min-h-screen bg-background font-circularPro antialiased"
)}
>
And this is the font-family in tailwind.confif:
fontFamily: {
circularPro: ["var(--font-circular-pro)"],
avantGarde: ["var(--font-avant-garde)"],
},
But I don’t know why but Avant Garde overrides Circular Pro!
Can anyone explain why is this happening? And how to get rid of this overridden!