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],
},
},
},
// ...
}
Top comments (0)