I'm trying to add local fonts to layout.css as written in the official documentation. I have several font families, so for each one I do this:
import localFont from 'next/font/local';
const bounded = localFont({
src: [
{
path: "./fonts/Bounded-ExtraLight.woff2",
weight: "200",
style: "normal",
},
{
path: "./fonts/Bounded-Regular.woff2",
weight: "400",
style: "normal",
},
],
variable: "--font-family",
});
And then I use it like this (again according to the documentation):
<body className={`${bounded.variable}`}>
My fonts are located in the public/fonts folder. The documentation says so:
To use a local font, import your font from next/font/local and specify the src of your local font file in the public folder.
But if you do everything as it is written, then there will be such a mistake:
I've tried changing paths, and in the end, only these work:
const bounded = localFont({
src: [
{
path: "../../public/fonts/Bounded-ExtraLight.woff2",
weight: "200",
style: "normal",
},
{
path: "../../public/fonts/Bounded-Regular.woff2",
weight: "400",
style: "normal",
},
],
variable: "--font-family",
});
But connecting fonts with such paths looks kind of weird. It seems to me that when building a project in most libraries, this path will eventually simply break and the fonts will not be connected.
Tell me how to solve the problem or other ways to connect fonts. Thanks!