Fonts

Settings up fonts in your theme.

Saas UI Core & Pro both use Inter as the default font.

Configuration#

The easiest way to install is using Font source.

yarn add @fontsource/inter

Then add it to your theme.

import { extendTheme } from '@chakra-ui/react'
import { theme as baseTheme } from '@saas-ui/react'

import '@fontsource/inter/variable.css'

// your theme

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

Using a custom font#

Configure a different font in your theme like this:

import { extendTheme } from '@chakra-ui/react'
import { theme as baseTheme } from '@saas-ui/react'

import '@fontsource/montserrar/variable.css'

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

Was this helpful?