Sebastian Goscinski

Next.js & TailwindUI insert Inter font family

Sebastian Goscinski's photo
Sebastian Goscinski
·

1 min read

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.jsTailwind CSSTypeScriptTailwindUI