Update the default fonts of your SaaS

By default, the kit uses Apple's default font on Apple devices, or Inter on others. These steps apply to the Drizzle kit.

TanStack Start has no equivalent of next/font/google. Instead, the kit ships the sans font as a self-hosted package via Fontsource and wires it through plain CSS variables.

The font is imported in the global stylesheet apps/web/src/styles.css:

/* Tailwind CSS + animation utilities */
@import 'tailwindcss';
@import 'tw-animate-css';
/* Sans font */
@import '@fontsource-variable/inter';

The same file defines the font stack that the design tokens map onto:

/* The sans font stack the design tokens map onto. */
:root {
  --font-sans-fallback:
    'Inter Variable', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

To display a different font:

1. Install the Fontsource package for the font you want, e.g. pnpm --filter web add @fontsource-variable/<font>.
2. Replace the @import '@fontsource-variable/inter'; line in apps/web/src/styles.css with your font's import.
3. Update the first entry of --font-sans-fallback in the :root block to match the new font family name.

Removing Apple's system as default font on Apple Devices

To set another font instead of Apple's system font, update the Tailwind variables.

Open apps/web/src/styles/shadcn-ui.css and replace -apple-system, BlinkMacSystemFont in the definition of the --font-sans variable with the font you want to use:

@theme inline {
  --font-sans: -apple-system, BlinkMacSystemFont, var(--font-sans-fallback);
  --font-heading: var(--font-sans);
}