reactjs - Font file (.ttf) path not resolving when stored in publicfonts using nextfontlocal

When trying to create a centralized font file as described Here.

I get the following error:

For context the project is structured like so:

├── README.md
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│   ├── fonts
│   │   └── anaheim-variablefont_wght.ttf
│   └── images
│       ├── fallingheart.svg
│       ├── favicon.ico
│       ├── file.svg
│       ├── globe.svg
│       ├── loadingheart.svg
│       ├── next.svg
│       ├── vercel.svg
│       └── window.svg
├── src
│   ├── app
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components
│   │   ├── Card.tsx
│   │   ├── Footer.tsx
│   │   └── Navbar.tsx
│   └── libs
│       └── fonts.tsx
├── tailwind.config.ts
├── tree.txt
└── tsconfig.json

This is a very bare bones project structure. The centralized font file is /src/libs/fonts.tsx

The code for the file is like so:

import localFont from "next/font/local";

export const anaheim = localFont({
  src: [
    {
      path: "/fonts/anaheim-variablefont_wght.ttf",
      weight: "100 900",
    },
  ],
  variable: "--font-Anaheim",
});

export const fonts = `${anaheim.variable}`;

Referencing the public folder in path: "/fonts/anaheim-variablefont_wght.ttf" does not work.

What does work is when path: "../../public/fonts/anaheim-variablefont_wght.ttf".

/src/app/layout.tsx imports fonts from /src/libs/fonts.tsx in here:

import type { Metadata } from "next";
import { fonts } from "@/libs/fonts";
import "./globals.css";

import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={fonts}>
      <body className={`bg-background text-foreground`}>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  );
}

I know its not a problem with the project resolving the public folder, since the folder is perfectly referenced in other parts of my application.

My question is what is causing the file not found error on next/font/local?
Why does given the relative path work, from what I know relative pathing with /public fails?
How could I resolve this issue?

From my research this probably is the reason why the referencing is not working. But the solutions given in there do not help me.

Versions
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]

When trying to create a centralized font file as described Here.

I get the following error:

For context the project is structured like so:

├── README.md
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│   ├── fonts
│   │   └── anaheim-variablefont_wght.ttf
│   └── images
│       ├── fallingheart.svg
│       ├── favicon.ico
│       ├── file.svg
│       ├── globe.svg
│       ├── loadingheart.svg
│       ├── next.svg
│       ├── vercel.svg
│       └── window.svg
├── src
│   ├── app
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components
│   │   ├── Card.tsx
│   │   ├── Footer.tsx
│   │   └── Navbar.tsx
│   └── libs
│       └── fonts.tsx
├── tailwind.config.ts
├── tree.txt
└── tsconfig.json

This is a very bare bones project structure. The centralized font file is /src/libs/fonts.tsx

The code for the file is like so:

import localFont from "next/font/local";

export const anaheim = localFont({
  src: [
    {
      path: "/fonts/anaheim-variablefont_wght.ttf",
      weight: "100 900",
    },
  ],
  variable: "--font-Anaheim",
});

export const fonts = `${anaheim.variable}`;

Referencing the public folder in path: "/fonts/anaheim-variablefont_wght.ttf" does not work.

What does work is when path: "../../public/fonts/anaheim-variablefont_wght.ttf".

/src/app/layout.tsx imports fonts from /src/libs/fonts.tsx in here:

import type { Metadata } from "next";
import { fonts } from "@/libs/fonts";
import "./globals.css";

import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={fonts}>
      <body className={`bg-background text-foreground`}>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  );
}

I know its not a problem with the project resolving the public folder, since the folder is perfectly referenced in other parts of my application.

My question is what is causing the file not found error on next/font/local?
Why does given the relative path work, from what I know relative pathing with /public fails?
How could I resolve this issue?

From my research this probably is the reason why the referencing is not working. But the solutions given in there do not help me.

Versions
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]

Share Improve this question edited Feb 2 at 10:19 asked Feb 2 at 10:08 Liferafter 911 silver badge11 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

In order for your relative path to work correctly, add /../public prefix to it:

import localFont from "next/font/local";

export const anaheim = localFont({
  src: [
    {
      path: "/../public/fonts/anaheim-variablefont_wght.ttf",
      weight: "100 900",
    },
  ],
  variable: "--font-Anaheim",
});

export const fonts = `${anaheim.variable}`;

The resources you place in public directory are available on the client side. The path /fonts/anaheim-variablefont_wght.ttf is the path on which this resource is available via HTTP/HTTPS request.

Next.js local fonts don't make additional network requests, see docs:

next/font will automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance.

So the path you are providing to the method is not the path to the network resource but the path to the source code file relative to the src directory.

The path to anaheim-variablefont_wght.ttf originates from the fonts.tsx file directory. That's the reason why ../../public/fonts/anaheim-variablefont_wght.ttf is working.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

reactjs - Font file (.ttf) path not resolving when stored in publicfonts using nextfontlocal - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)