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)