Local fonts fails to resolve in next.js while deploying in vercel

I am trying to use next/fonts in next.js 13.3. Everything works fine locally but when I deployed to Vercel, I keep getting this build error Module not found: Can't resolve './fonts/BrFirma-Thin.woff2'

This is what my folder structure looks like

• src
  • _app.js
  • styles
    • font.js
    • fonts

_app.js

import { BRFirma } from 'styles/font';
...
 <main className={BRFirma.className}>
  ...
 </main>

font.js

import localFont from 'next/font/local';

export const BRFirma = localFont({
    src: [
       
        {
            path: './fonts/BrFirma-Regular.woff2',
            weight: '400',
        },
        {
            path: './fonts/BrFirma-SemiBold.woff2',
            weight: '600',
        },
    ],
}); 

Again I moved the fonts to the public folder just to make sure I am doing it right.

font.js

import localFont from 'next/font/local';

export const BRFirma = localFont({
    src: [
       
        {
            path: '../../public/assets/fonts/BrFirma-Regular.woff2',
            weight: '400',
        },
        {
            path: '../../public/assets/fonts/BrFirma-SemiBold.woff2',
            weight: '600',
        },
    ],
});

Once again, everything works fine locally but deployment still fails with the module not found message.

Just for the record, this is what jsconfig.js file looks like.

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "@/*": ["./src/*"]
        }
    },
    "exclude": ["node_modules", "build", "dist", "jest"]
}

Ran into the same issue today, not really sure why vercel doesn't like some fonts but try downloading the font file from a different place. the path you're using is not the problem. https://github.com/orgs/vercel/discussions/2367