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 proTheme } from '@saas-ui-pro/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 proTheme } from '@saas-ui-pro/react'
import '@fontsource/montserrar/variable.css'
const theme = extendTheme(
{
fonts: {
heading: 'MontserratVariable, sans-serif',
body: 'MontserratVariable, sans-serif',
},
},
proTheme
)

Was this helpful?