# Update the default fonts of your SaaS

> Learn how to update the fonts of your application

*Canonical: https://makerkit.dev/docs/tanstack-drizzle/branding/fonts*

---

By default, the kit uses Apple's default font on Apple devices, or `Inter` on others. These steps apply to the [Drizzle](/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](https://fontsource.org) and wires it through plain CSS variables.

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

```css {% title="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:

```css {% title="apps/web/src/styles.css" %}
/* 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:

```css {% title="apps/web/src/styles/shadcn-ui.css" %}
@theme inline {
  --font-sans: -apple-system, BlinkMacSystemFont, var(--font-sans-fallback);
  --font-heading: var(--font-sans);
}
```