In this short post I will show you how to easily integrate the Inter font family for TailwindUI in Next.js.

Next.js Document setup

To integrate the Inter font family into your Next.js application you have to create a custom document page, just create the file _document.tsx and insert the following code.

import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'

class MyDocument extends Document {
    static async getInitialProps(ctx: DocumentContext) {
        const initialProps = await Document.getInitialProps(ctx)
        return { ...initialProps }
    }

    render() {
        return (
            <Html lang="de" className="h-full">
                <Head>
                    <link
                        href="https://rsms.me/inter/inter.css"
                        rel="stylesheet"
                    />
                </Head>
                <body className="h-full">
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument

Tailwind Configuration

To activate the Inter font family in TailwindCSS you just have to extend the theme property and specify your own fontFamily using the following code.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  // ...
}

Next.js & TailwindUI insert Inter font family

Next.js Document setup

Tailwind Configuration

Subscribe to my newsletter

Sebastian Goscinski

Sebastian Goscinski