Using Fonts in Next.js and Tailwind (Google Fonts, Local Fonts, Tailwind CSS)

Metal printing book characters

Next.js 13 introduced new & improved font optimization.

Here's a quick guide on getting up and going.

Google fonts

You import Google fonts straight from next/font.

Then apply the styles to the root element of the app.

// pages/_app.js
import { Roboto_Flex } from 'next/font/google';

// If loading a variable font, you don't need to specify the font weight
const roboto = Roboto_Flex({
  // Google Fonts are automatically subset, so for optimization, specify the required subset
  subsets: [ 'latin' ],
  // weight: [ '400', '700' ],
})

export default function RootLayout({ children }) {
  return (
    // Apply the styles to the root element
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  );
}

One thing to note is if loading a variable font, you don't need to specify the font weight.

Nextjs also recommends using variable fonts for the best performance and flexibility.

Here's a list of Variable fonts on Google fonts: https://fonts.google.com/variablefonts

Local fonts

Import the next/font/local helper and pass the src property the path to your local font file.

// pages/_app.js
import localFont from 'next/font/local';

// Specify the `src` of your local font file (this can be inside your `pages` directory
const customFont = localFont({ src: "./cool-font.woff2" })

export default function RootLayout({ children }) {
  return (
    // Apply the styles to the root element
    <html lang="en" className={customFont.className}>
      <body>{children}</body>
    </html>
  );
}

Tailwind CSS

Tailwind uses a slightly different approach and can be set up in a few ways.

The easiest option is to use a CSS variable.

I'll use the same Roboto font from our initial example below.

But then, instead of applying the font.className, we will use the font.variable.

We then need to update our fontFamily in our tailwind.config.js to keep our fallbacks and update our CSS variable.

Show me the code

// pages/_app.js
import { Roboto_Flex } from 'next/font/google';

const roboto = Roboto_Flex({
  subsets: [ 'latin' ],
  // Apply the variable name
  variable: "--roboto-font",
})

export default function RootLayout({ children }) {
  return (
    // Apply the font variable and sans fonts
    <html lang="en" className={`${roboto.variable} font-sans`}>
      <body>{children}</body>
    </html>
  );
}

Now update our tailwind.config.js:

// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // Update the fontFamily in your theme 👇
      fontFamily: {
        sans: ['var(--roboto-font)', ...fontFamily.sans],
      },
    },
  },
  plugins: [],
}

Voilà! 🎉

You now customize your Next.js apps to your heart's content.

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers? You can join our free web developer community here. 🎉

Using Fonts in Next.js and Tailwind (Google Fonts, Local Fonts, Tailwind CSS)

Google fonts

Local fonts

Tailwind CSS

Written by Niall Maher

Fetching comments