Question 196381 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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?

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    I think this code helps you:

    const Eina = localFont({
    src: "./fonts/eina01.ttf",
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search