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/montserrat

Next 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
)

Was this helpful?