Trouble with path for next/font/local

Answered

remii posted this in #help-forum

2025-05-20T03:07:28.516Z

Current file directory:
.
└── personal-website/
├── public/
│ └── fonts/
│ ├── helveticaneue-light.otf
│ ├── helveticaneue-thin.otf
│ ├── helveticaneue-roman.otf
│ ├── helveticaneue-medium.otf
│ └── helveticaneue-bold.otf
├── src/
│ ├── app/
│ │ └── ui/
│ │ └── fonts.ts
│ ├── layout.tsx
│ └── page.tsx
└── ...

Current error:
None of my fonts seem to work when imported.

⨯ ./src/app/ui
Font file not found: Can't resolve '../../public/fonts/helveticaneue-roman.otf'

Current state of code:
I import from next/font/local and export a const variable helveticaNeue

import localFont from 'next/font/local';

export const helveticaNeue = localFont({
    src : [
        {
            path: '../../public/fonts/helveticaneue-light.otf',
            weight: '300',
            style: 'light',
        },
        {
            path: '../../public/fonts/helveticaneue-medium.otf',
            weight: '500',
            style: 'medium',
        },
        {
            path: '../../public/fonts/helveticaneue-roman.otf',
            weight: '400',
            style: 'normal',
        },
        {
            path: '../../public/fonts/helveticaneue-thin.otf',
            weight: '200',
            style: 'thin',
        },
        {
            path: '../../public/fonts/helveticaneue-bold.otf',
            weight: '700',
            style: 'bold',
        },
    ],
    variable: '--font-helvetica-neue',
    display: 'swap',
});

Now in my layout.tsx file i am attempting to import that const variable

import type { Metadata } from "next";
import { helveticaNeue } from "@/app/ui/fonts";
import "./globals.css";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={helveticaNeue.variable}>
      <body className="antialiased">{children}</body>
    </html>
  );
}

Answered by joulev

Your bold font file name is wrong. It doesn’t have the dash

View full answer

18 Replies

remiiOP

2025-05-20T03:11:21.240Z

I should also mention that I have looked through previous forum posts and have seen suggestions to add the font in the same folder localFont is imported (in my case /ui/). However, I have also attempted that and have been given the same error. My path for that was ./helveticaneue-roman.otf.

@remii **Current file directory:** . └── personal-website/ ├── public/ │ └── fonts/ │ ├── helveticaneue-light.otf │ ├── helveticaneue-thin.otf │ ├── helveticaneue-roman.otf │ ├── helveticaneue-medium.otf │ └── helveticaneue-bold.otf ├── src/ │ ├── app/ │ │ └── ui/ │ │ └── fonts.ts │ ├── layout.tsx │ └── page.tsx └── ... **Current error:** None of my fonts seem to work when imported. ⨯ ./src/app/ui Font file not found: Can't resolve '../../public/fonts/helveticaneue-roman.otf' **Current state of code:** I import from next/font/local and export a const variable helveticaNeue import localFont from 'next/font/local'; export const helveticaNeue = localFont({ src : [ { path: '../../public/fonts/helveticaneue-light.otf', weight: '300', style: 'light', }, { path: '../../public/fonts/helveticaneue-medium.otf', weight: '500', style: 'medium', }, { path: '../../public/fonts/helveticaneue-roman.otf', weight: '400', style: 'normal', }, { path: '../../public/fonts/helveticaneue-thin.otf', weight: '200', style: 'thin', }, { path: '../../public/fonts/helveticaneue-bold.otf', weight: '700', style: 'bold', }, ], variable: '--font-helvetica-neue', display: 'swap', }); Now in my layout.tsx file i am attempting to import that const variable import type { Metadata } from "next"; import { helveticaNeue } from "@/app/ui/fonts"; import "./globals.css"; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en" className={helveticaNeue.variable}> <body className="antialiased">{children}</body> </html> ); }

joulev

2025-05-20T04:33:13.492Z

You are at src/app/ui

../ = src/app
../../ = src

Hence you need another ../

../../../public/fonts/…

@joulev You are at src/app/ui ../ = src/app ../../ = src Hence you need another ../ ../../../public/fonts/…

remiiOP

2025-05-20T04:34:51.138Z

it didn't work either :(

@remii it didn't work either :(

joulev

2025-05-20T04:35:01.644Z

I’ll need a repo to test then. Make a reproduction repository