reactjsnext.jstailwind-csstypography

Next.js 13 + Tailwind - localFont not rendering/applying to font-sans class

I'm starting up a project using Nextjs and TailwindCSS, and been trying to get the fonts to work using variables - however it is not.

My layout.js:

    import localFont from "next/font/local";
    
    // Font files can be colocated inside of `app`
    const customFont = localFont({
      src: [
        {
          path: "./components/typography/localFont/exConSemiBold.ttf",
          weight: "normal",
          style: "normal",
        },
      ],
      variable: "--custom",
    });
    
    export default function RootLayout({ children }) {
      return (
        <html lang="en" className={`${customFont.variable} font-sans`}>
          <body>{children}</body>
        </html>
      );
    }

My 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: {
      fontFamily: {
        sans: ["var(--custom)"],
      },
      colors: {
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

Component in which I am trying to use the font: (app/Car/page.js)

export default function Car() {
  return <p className="font-sans">This is a car</p>;
}

It seems nothing gets applied by using the class font-sans. The font loads in the generated CSS, and using the inspector to manually set the font-family to the font name generated by the variable, it shows.

Some weird things:

Solution

  • This is resolved.

    The issue was due to not importing import "./globals.css" at the top of layout.js (which held all base & utility css).