Fonts

How to configure fonts in TanStack Router 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.

Font source#

cd apps/web && yarn add @fontsource-variable/montserrat

Next import it in your root layout.

// apps/web/app/routes/__root.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
)