Fonts
How to configure fonts in Next.js starter kit.
Saas UI Pro 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 && yarn add @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
)