Next.js unable to find font file

I'm trying to use next.js localFont, like so:

const Eina = localFont({
  src: "../public/fonts/eina01.ttf",
});

However, no matter where i place the eina file/whatever file path I try, it always gives me:

Module not found: Can't resolve '@next/font/local/target.css?{"path":"pages/_app.js","import":"","arguments":[{"src":"../public/fonts/eina01.ttf"}],"variableName":"Eina"}'

its currently placed in public/fonts, but I tried to place it in the pages like said in the docs, with no luck either. How am i meant to import the font?

I see that you have mentioned the path for font as public/font, but you have given the path in src as

src: "../public/fonts/eina01.ttf",

I think you just need to change it to

src: "../public/font/eina01.ttf",

Or, If it was just a typo in your question, please comment here.

One option is to import the fontfile in a CSS-file like this:

@font-face {
    font-family: "Cutiful";
    font-style: normal;
    font-weight: 400;
    src: url("./cutiful.otf");
}

In this example the fontfile is located in the same directory as the CSS-file.
Make sure to import the CSS-file in your RootLayout with import "./globals.css" or whatever the name of your CSS-file is. In your JSX you can then add classNames to tags like this:

<div className="myClass">some text in a div-tag</div>

and the styling is done in the CSS-file again, for example:

.myClass {
    font-family: "Cutiful", cursive;
    font-size: 3.4rem;
}

If you insist on using localFont, look here: https://nextjs.org/docs/app/api-reference/components/font or here: https://nextjs.org/docs/pages/api-reference/components/font