How to add google fonts to Tailwind CSS custom config (NextJS example)

This post will show you how to add custom Google Fonts like Inter and Roboto to your Tailwind JS project and extend the default config. Using the methods shown will let you use default tailwind font classes like font-sans and font-serif and apply custom Google fonts without the need to import fonts directly.

First step: choose the fonts

Go to Google Fonts and pick a few fonts you wish to add to your Tailwind site.

Once you have found some load your project and get ready to add the fonts.

Add the google fonts npm package

For our example we will use the NextJS google font package to import our custom fonts:

import {
  Inter as Sans,
  Bitter as Serif,
  Fira_Code as Mono,
} from '@next/font/google';

You can install this package using npm i --save @next/font. If you are not using NextJS simply import the fonts directly into your HTML using link tags.

Create JS variables for the font families

Then we create JS variables for each subset of font we want to use and assign it a CSS variable.

const sans = Sans({
  subsets: ['latin'],
  // this will be the css variable
  variable: '--font-sans',
});

Do the same for other fonts:

const serif = Serif({
  subsets: ['latin'],
  variable: '--font-serif',
});
const mono = Mono({
  subsets: ['latin'],
  variable: '--font-mono',
});

Create custom css variables

Now inject the css variables into your application. For a Next JS project we can add a <style> tag to our _app.jsx entrypoint file.

<style jsx global>
{`
  :root {
    --font-sans: ${sans.style.fontFamily};
    --font-serif: ${serif.style.fontFamily};
    --font-mono: ${mono.style.fontFamily};
  }
`}
</style>

Load the fonts into Tailwind config

The last step is to wire the variables into the tailwind.config.js so that default font classes apply our selected fonts:

const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      fontFamily: {
        // add the css variable and include fallback fonts from tailwind default theme
        sans: ['var(--font-sans)', ...fontFamily.sans],
        serif: ['var(--font-serif)', ...fontFamily.serif],
        mono: ['var(--font-mono)', ...fontFamily.mono],
      },
    }
  },
  plugins: [
    require("@tailwindcss/aspect-ratio"),
  ]
};

Using the fonts

You can now apply the custom fonts using the Tailwind font classes such as font-sans:

<div id={'example-component'}>
  <h1 className={'font-serif'}>A grand title</h1>
  <p className={'font-sans'}>Some text and variables <code className={'font-mono'}>x = 1</code></p>
</div>

We can even apply different fonts based on print or screen media. For more examples see the blog.