How to Use Google Fonts with Tailwind CSS in Next.js

Adding custom fonts, such as Google Fonts, to a Next.js project with Tailwind CSS is a straightforward process. Follow this step-by-step guide to seamlessly integrate Google Fonts into your project.

Step 1: Install Tailwind CSS (If Not Already Installed)

If you don’t already have Tailwind CSS set up in your Next.js project, follow these commands:

npx create-next-app@latest my-next-app --typescript
cd my-next-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Configure the tailwind.config.js file and include Tailwind's directives in your globals.css (or index.css):

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

Step 2: Import Google Fonts in Your Project

There are two main methods to use Google Fonts in your project:

Option 1: Using the `next/font/google` API (Recommended for Next.js 13+)

This approach optimizes font loading by leveraging Next.js' built-in font optimization.

Import your chosen Google Font in _app.tsx (or _app.js):

import '@/styles/globals.css';
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-inter',
});

export default function App({ Component, pageProps }: any) {
  return (
    <main className={`${inter.variable}`}>
      <Component {...pageProps} />
    </main>
  );
}

Extend Tailwind CSS configuration to use the imported font:

Update tailwind.config.js:

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        inter: ['var(--font-inter)', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Use the font in your components:

<h1 className="font-inter text-3xl">Hello, Google Fonts!</h1>

Option 2: Importing Fonts via CSS

If you prefer to manage fonts through a CSS file, follow these steps:

Add the Google Fonts @import URL at the top of your globals.css file:

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

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

Extend your tailwind.config.js file to include the custom font:

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        inter: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Use the font in your components:

<p className="font-inter text-xl">Styled with Google Fonts and Tailwind!</p>

Step 3: Verify Font Loading

Ensure the font is loading correctly by running your development server:

npm run dev

Open your browser, inspect the page, and check the Network tab for font file requests from Google Fonts.

FAQ

Which method is better: `next/font/google` or CSS import?

Using next/font/google is recommended for Next.js 13+ as it optimizes font loading and reduces cumulative layout shifts (CLS). The CSS import method is simpler but doesn't benefit from these optimizations.

How can I add multiple Google Fonts?

You can import multiple fonts using the next/font/google API by creating separate variables for each font, or include them in your CSS import URL:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Roboto:wght@400;500&display=swap');

Why is my Google Font not applying?

Ensure the fontFamily configuration matches the font name.
Check for typos in the font name or CSS classes.
Verify the @import statement is placed before Tailwind's directives.

Can I preload Google Fonts for better performance?

Yes! The next/font/google API automatically preloads fonts. For CSS imports, you can add a <link> tag with the rel="preload" attribute in the <head> of your _document.js file.