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?