CODEWITHSUNDEEP
next.jstailwind-csscustom-fontgoogle-fonts
Aun Shahbaz Awan
Aun Shahbaz Awan

Reputation: 775

How to use google fonts in tailwind css in Next.js Project

I have a project in Next.js but can't figure out how to use Google Font with Tailwind CSS.

Upvotes: 7

Views: 16832

Answers (5)

Moginder
Moginder

Reputation: 21

I had this same issue. I replaced it with @font-face for some time. The issue is where you import you google font import link. It should be above all default tailwind imports. Check CSS @import conditions

@import url('https://fonts.googleapis.com/css2?family=Frijole&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

This worked for me!

Upvotes: 0

Sourav Purkait
Sourav Purkait

Reputation: 344

@import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

You have to add the import statement BEFORE the tailwind annotation and it loaded the font perfectly. Hope it helps!

@import rules must be at the top. Read more: https://stackoverflow.com/a/24390833/12160777

Upvotes: 1

Mohammadreza Abdoli
Mohammadreza Abdoli

Reputation: 1048

// layout
import { Inter, Roboto_Mono } from 'next/font/google'
 
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})
 
const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})
 
export default function RootLayout({children}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

// tailwind
    module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

you can check it here: https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css

Upvotes: 3

Tajs
Tajs

Reputation: 621

According to the documentation you need to do this to make it work with TailWind and Next13

First import next/font/google to your _app.ts. And create a font variable.

import Layout from '@/components/layout/Layout'
import '@/styles/globals.css'
import type { AppProps } from 'next/app
import { Kalam } from 'next/font/google';

const kalam = Kalam({ 
  subsets: ['latin'],
  weight:["400"],
  variable: '--font-kalam',
});

export default function App({ Component, pageProps }: AppProps) {
  return (

    <main className={`${kalam.variable}`}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </main>
  )
}

Then go your tailwind.config.js and extend your font-family.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        kalam: ['var(--font-kalam)'],
      },
    },
    container: {
      // you can configure the container to be centered
      center: true,
      // or have default horizontal padding
      padding: '1rem',

      // default breakpoints but with 40px removed
      screens: {
        sm: '500px',
        md: '628px',
        lg: '884px',
        xl: '1140px',
        '2xl': '1296px',
      },
    },
  },
  plugins: [],
}

To use it in your code simply add font-kalam as your class.

See the docs here.

Upvotes: 11

Aun Shahbaz Awan
Aun Shahbaz Awan

Reputation: 775

First You have to Add imported font Url in globals.css in the styles folder and For React.js It will be index.css in the src folder.

e.g.

@import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

Then Extend modules.exports in the tailwind.config.js file

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        play: ["Play", "sans-serif"],
      },
    },
  },
  plugins: [],
};

Finally, you can use this font anywhere e.g.

<h2 className="font-play text-5xl font-bold uppercase">
  Hello World!
</h2>

Upvotes: 13

Related Questions