Fonts
How to configure fonts in Next.js starter kit.
Saas UI uses Inter as the default font, but you can easily change it to any
other font.
Installation
We are using the variable version to reduce the total download size as opposed
to including specific versions.
To install a different font, you can use Font Source or Next.js fonts.
Font source
cd apps/web && pnpm install @fontsource-variable/montserratNext import it in your root layout.
// apps/web/app/layout.tsx
import '@fontsource-variable/montserrat'
//....And update your theme to use the new font.
// packages/theme/src/theme.ts
export const theme = extendTheme(
{
fonts: {
heading: 'Montserrat Variable, sans-serif',
body: 'Montserrat Variable, sans-serif',
},
},
baseTheme,
)Next.js fonts
// apps/web/app/layout.tsx
import { Montserrat } from 'next/font/google'
const montserrat = Montserrat({
weight: ['300', '400', '500', '700'],
subsets: ['latin'],
display: 'swap',
fallback: ['sans-serif'],
})
//...
<body className={montserrat.variable}>
//....
</body>And update your theme to use the new font.
// packages/theme/src/theme.ts
export const theme = extendTheme(
{
fonts: {
heading: 'var(--font-montserrat)',
body: 'var(--font-montserrat)',
},
},
baseTheme,
)