Next.js Discord

Discord Forum

Trouble with Custom Fonts

Unanswered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
I can't get my custom font to work, but I feel like it's set up properly. I'm using NextJS 14 with the App router and Tailwindcss.
When I inspect the element in question it says that the css variable is not set, but it does appear the NextJS discovered the custom font so I don't know why the CSS variable isn't getting set.

I'll reply to this post with the code. The project can be found here:
https://gitlab.com/betothebopgames/funfts/-/tree/master/funft-game?ref_type=heads

7 Replies

Cape lionOP
app/layout.jsx
import './globals.css';
import localFont from 'next/font/local';

const chemFont = localFont({
  src: '../public/fonts/ChemyRetro_v01.otf',
  display: 'swap',
  variable: '--font-chemy'
})

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`$(chemFont.variable)`}>
      <body>
    <header>
      <h2>Header Item</h2>
    </header>
    <main>
          {children}
    </main>
    <footer>
          <h3>Footer Item</h3>
    </footer>
      </body>
    </html>
  )
}
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      fontFamily: {
      chemy: ['var(--font-chemy)'],
      },
    },
  },
  plugins: [],
};
page.jsx:
export default function HomePage() {
  return (
    <>
      <h1 className="font-chemy">
        fuNFT Project Main Page
      </h1>
      <p>
    This is where content goes.
      </p>
    </>
  );
}

I'm just starting out with this project and I'm relatively new to NextJS, but this font issue is frustrating me. You can see where I use the font here on the main page.
In my browser it shows:
.font-chemy { font-family: var(--font-chemy);
and says --font-chemy is undefined
And I see this in the NextJS generated css file:
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[3].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[11].oneOf[3].use[2]!./node_modules/next/font/local/target.css?{"path":"app/layout.jsx","import":"","arguments":[{"src":"../public/fonts/ChemyRetro_v01.otf","display":"swap","variable":"--font-chemy"}],"variableName":"chemFont"} ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: '__chemFont_2065b8';
src: url(/_next/static/media/5718b2aace3f22b1-s.p.otf) format('opentype');
font-display: swap;
}@font-face {font-family: '__chemFont_Fallback_2065b8';src: local("Arial");ascent-override: 62.26%;descent-override: 15.57%;line-gap-override: 7.00%;size-adjust: 128.49%
}.__className_2065b8 {font-family: '__chemFont_2065b8', '__chemFont_Fallback_2065b8'
}.__variable_2065b8 {--font-chemy: '__chemFont_2065b8', '__chemFont_Fallback_2065b8'
}
So it looks like it loaded the font file and even did something with the variable, but it's just not connecting.
Cape lionOP
Okay, so for now I'm bypassing NextJS's Font optimization and just added the custom font to my globals.css according to the Tailwind docs:
@layer base {
  @font-face {
    font-family: 'chemy';
    font-display: swap;
    src: url(/fonts/ChemyRetro_v01.otf);
  }
}

Maybe I'll figure out how to use Next Font later.