I have some local font in my project
placed in public/fonts as you see.
in Rootlayout, I am trying to use it like this
import "./globals.css";
import Providers from "./privider";
import localFont from 'next/font/local';
const myLocalFont = localFont({
src: '/fonts/woff2/YekanBakh-VF.woff2',
display: 'swap',
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html>
<body lang="fa" dir="rtl"
className={myLocalFont.className}
>
<Providers>
{children}
</Providers>
</body>
</html>
);
}
But I get some error
Build Error
Font file not found: Can't resolve '/fonts/woff2/YekanBakh-VF.woff2'
whats the problem?