Fonts

Settings up fonts in Saas UI Pro.

Saas UI Pro uses Inter as the default font.

Configuration

Note that we are using the variable version to reduce the total download size as opposed to including specific versions.

Changing the font

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/ui-theme/src/theme.ts

export const theme = extendTheme(
  {
    fonts: {
      heading: 'Montserrat Variable, sans-serif',
      body: 'Montserrat Variable, sans-serif',
    },
  },
  baseTheme
)