Next.js Discord

Discord Forum

Multiple fonts using tailwindcss

Answered
Polar bear posted this in #help-forum
Open in Discord
Polar bearOP
I followed the [docs](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css) to use two google fonts with tailwindcss but couldnt get it to work.

Here are the relevant files

// layout.tsx
import './globals.css'
import type { Metadata } from 'next'
import { Inter, Playfair_Display } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap'
})
const playfair = Playfair_Display({
  subsets: ['latin'],
  variable: '--font-playfair',
  display: 'swap'
})

export const metadata: Metadata = {
  title: 'shasherazi\'s portfolio',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <link rel="icon" href="/tux.png" />
      </head>
      <body className={`${playfair.className} ${inter.className}`}>{children}</body>
    </html>
  )
}


// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        serif: ['var(--font-playfair)'],
      },
    },
  },
  plugins: [],
}
export default config


// src/app/page.tsx
export default function Home() {
  return (
    <main>
      <h2 className="font-sans">heloo</h2>
      <h1>Hello World</h1>
    </main>
  );
}


I was expecting that at least "heloo" would be using inter font, but every text was using playfair display font. can you point out what im missing?
Answered by fuma
Seems like you missed some code in their example:
It is inter.variable instead of inter.className. className actually sets the font of the element (the whole body in this case)
and variable only sets the CSS variable you defined in the options.

Your code above, {${playfair.className} ${inter.className} only one of them will be used since class names are conflicted.
Please change to variable, your problem should be fixed
View full answer

3 Replies

riský
and now, have you used font-sans or font-serif in a classname
@Polar bear I followed the [docs](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css) to use two google fonts with tailwindcss but couldnt get it to work. Here are the relevant files tsx // layout.tsx import './globals.css' import type { Metadata } from 'next' import { Inter, Playfair_Display } from 'next/font/google' const inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap' }) const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-playfair', display: 'swap' }) export const metadata: Metadata = { title: 'shasherazi\'s portfolio', description: 'Generated by create next app', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <head> <link rel="icon" href="/tux.png" /> </head> <body className={`${playfair.className} ${inter.className}`}>{children}</body> </html> ) } ts // tailwind.config.ts import type { Config } from 'tailwindcss' const config: Config = { content: [ './src/pages/**/*.{js,ts,jsx,tsx,mdx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: { fontFamily: { sans: ['var(--font-inter)'], serif: ['var(--font-playfair)'], }, }, }, plugins: [], } export default config tsx // src/app/page.tsx export default function Home() { return ( <main> <h2 className="font-sans">heloo</h2> <h1>Hello World</h1> </main> ); } I was expecting that at least "heloo" would be using inter font, but every text was using playfair display font. can you point out what im missing?
fuma
Seems like you missed some code in their example:
It is inter.variable instead of inter.className. className actually sets the font of the element (the whole body in this case)
and variable only sets the CSS variable you defined in the options.

Your code above, {${playfair.className} ${inter.className} only one of them will be used since class names are conflicted.
Please change to variable, your problem should be fixed
Answer