CODEWITHSUNDEEP
next.jstailwind-cssgoogle-fonts
Fahad
Fahad

Reputation: 333

Using multiple font in next js with tailwind css

I want to use two fonts, one for the whole website and the other for a specific <h3> tag. I am using Google fonts. But, unfortunately, it is not working.

The layout.tsx file is as follows:

import './globals.css'
import type { Metadata } from 'next'
import { Nunito_Sans, Tulpen_One } from 'next/font/google'

const nunito_sans = Nunito_Sans({ subsets: ['latin'] })

const tulpen_one = Tulpen_One({
  weight: '400',
  subsets: ['latin'],
  variable: '--font-tulpen',
})

export const metadata: Metadata = {
  title: 'Name | Portfolio',
  description: 'moto',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={nunito_sans.className}>{children}</body>
    </html>
  )
}

the tailwind.config.ts is as follows:

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      fontFamily: {
        cursive: ['var(--font-tulpen)'],
      },
    },
  },
  plugins: [],
}
export default config

I used it like this:

<h3 className='my-4 text-3xl font-medium tracking-wider font-cursive'>First name <span>Last name</span></h3>

But, I am not getting the intended result. How, can I do this?

Upvotes: 5

Views: 3204

Answers (1)

Angeles Maza
Angeles Maza

Reputation: 21

you need to change in this line:

  <body className={nunito_sans.className}>{children}</body>

the method classname to variable. it should be like that:

  <body className={nunito_sans.variable}>{children}</body>

Upvotes: 2

Related Questions