Next.js Discord

Discord Forum

Fonts not working

Unanswered
Carolina Wren posted this in #help-forum
Open in Discord
Carolina WrenOP
import type { Metadata } from "next";
import { Inter, Poppins, Rozha_One } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const rozha_one = Rozha_One({
  weight: "400",
  subsets: ["latin"],
  variable: "--font-rozha-one",
});
const poppins = Poppins({
  weight: ["400", "600"],
  subsets: ["latin"],
  variable: "--font-poppins",
});

export const metadata: Metadata = {
  title: "MGS",
  description: "The webpage for the MGS",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${inter.variable} ${rozha_one.variable} ${poppins.variable}`}
      >
        {children}
      </body>
    </html>
  );
}

This is how my layout file looks the fonts were working all fine but now it is not working what could be the cause?

5 Replies

Passenger Pigeon
I am also having a problem with fonts. I can only use Inter in dev mode, when I deploy the website the font changes to ui-sans-serif. I tried use SpaceGrotesk font and it worked in dev and production.
Passenger Pigeon
I solved my problem.
Tramp ant
Are you using tailwind?
Carolina WrenOP
Yes
I followed the docs for using different fonts, it was working on both prod and dev but I don't now in dev it's not working