// font.ts file
import { Quicksand, Syncopate } from 'next/font/google';
export const quickSandRegular = Quicksand({
subsets: ['latin'],
variable: '--font-quicksand-reg',
weight: '400',
display: 'swap',
});
export const quickSandSmBold = Quicksand({
subsets: ['latin'],
variable: '--font-quicksand-smbold',
weight: '600',
display: 'swap',
});
export const syncopateRegular = Syncopate({
subsets: ['latin'],
variable: '--font-syncopate-reg',
weight: '400',
display: 'swap',
});
export const syncopateBold = Syncopate({
subsets: ['latin'],
variable: '--font-syncopate-bold',
weight: '700',
display: 'swap',
});
//layout.tsx file
import {
quickSandRegular,
quickSandSmBold,
syncopateBold,
syncopateRegular,
} from '@/lib/fonts';
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {return (
<html lang="en">
<body
className={`${[
syncopateRegular.variable,
syncopateBold.variable,
quickSandRegular.variable,
quickSandSmBold.variable,
]} `}
>
{children}
</body>
</html>
);
}
// global.css file
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.card {
& .header {
font-family: var(--font-syncopate-reg);
@apply center;
}
}
}
// page.tsx file
export default function CustomerList() {
return (<Card className="card">
<CardHeader>
<CardTitle className="header">RIMIX</CardTitle>
</CardHeader>
</Card>)
}
I attempted to modify the font using NextFont's variable in my CSS file, but it did not take effect.
Following the guidance from NextJs documentation, I tried specifying the font family inside my css file using the defined variable name.
const syncopateRegular = Syncopate({
subsets: ['latin'],
variable: '--font-syncopate-reg', /** using this in global css file in var() */
weight: '400',
display: 'swap',
});
However, the font of my text remained unchanged.
Initially, I suspected the issue was due to using .className instead of .variable suffix for the fonts inserted into the Root Layout, but that was not the cause.