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 && pnpm add @fontsource-variable/montserratNext 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/preset.ts
export const config = defineConfig({
theme: {
fonts: {
heading: {
value: 'Montserrat Variable, sans-serif',
},
body: {
value: 'Montserrat Variable, sans-serif',
},
},
},
})