Boilerplate layout.tsx file has a broken font class?

[Lazy2K]

Let me know if I'm just being stupid, but I was struggling to change the font with NextUI for ages. I imported the new font like so...

import { Fira_Code as FontMono, DM_Sans as FontSans } from "next/font/google";

export const fontSans = FontSans({
  subsets: ["latin"],
  variable: "--font-sans",
});

And it wasn't working, I wasn't even getting the default Inter font... and I changed layout.tsx to be fontSans.className instead of fontSans.variable and it worked.

FROM (This is how it comes default after running nextui init project-name)

className={clsx(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable
        )}

TO

className={clsx(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.className
        )}

And now it works and I can display all the different fonts I want. Am I just being stupid and not understanding how the fonts should work? Or did I discover a bug in the boilerplate?

Thanks :)

[wingkwong]

Yes. You're right. Currently this variable seems not in use. I may need to dig the code history a bit. Thanks for pointing out.

[wingkwong]

turned out missing this part in tailwind.config.js. just updated the templates.

  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)"],
        mono: ["var(--font-geist-mono)"],
      },
    },
  },