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-variable/inter

Then add it to your theme.

import { extendTheme } from '@chakra-ui/react'
import { theme as baseTheme } from '@saas-ui/react'
import '@fontsource-variable/inter'
// 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-variable/montserrat'
const theme = extendTheme(
{
fonts: {
heading: 'Montserrat Variable, sans-serif',
body: 'Montserrat Variable, sans-serif',
},
},
baseTheme
)

Was this helpful?