#Only one next/font/google font appearing

1 messages · Page 1 of 1 (latest)

sterile bluff
#

I'm running a Next14 app with app router.
In my layout.tsx i import two fonts from next/font/google like this:

import { Playfair_Display, Montserrat } from "next/font/google";

const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair" });
const montserrat = Montserrat({ subsets: ["latin"], variable: "--font-montserrat" });

In my return statement:
<body className={cn(montserrat.className, playfair.className, "min-h-screen")}>

Only monserrat is working. If I remove montserrat from the body className, the playfair font works, but when I add both only montserrat works.

frozen falconBOT
#

Hi @sterile bluff. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, it seems like you are correctly importing and using multiple fonts in your Next.js application. However, the issue you're facing might be due to the order of the class names in the className attribute.

In CSS, the last rule defined takes precedence. If both Montserrat and Playfair_Display are defining styles for the same elements, only the last one (in your case Montserrat) will be applied.

If you want to apply different fonts to different elements, you can do so by using the className of each font on the respective elements. For example, you can apply Montserrat to the body of your document and Playfair_Display to all h1 tags.

Here's an example based on the extracts:

// layout.tsx
import { Playfair_Display, Montserrat } from "next/font/google";

const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair" });
const montserrat = Montserrat({ subsets: ["latin"], variable: "--font-montserrat" });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={montserrat.className}>
      <body>
        <h1 className={playfair.className}>My App</h1>
        <div>{children}</div>
      </body>
    </html>
  );
}

In this example, Montserrat will be applied globally, and Playfair_Display will be applied to all h1 tags.

If you want to use both fonts in the same element, you might need to create a CSS rule that combines both fonts and apply that rule to the element. However, this is not covered in the provided extracts.