# Update the default fonts of your SaaS

> Learn how to update the fonts of your application

*Canonical: https://makerkit.dev/docs/nextjs-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.

The fonts are defined at `apps/web/lib/fonts.ts`:

```typescript {% title="apps/web/lib/fonts.ts" %}
import { Inter as SansFont } from 'next/font/google';

/**
 * @sans
 * @description Define here the sans font.
 * By default, it uses the Inter font from Google Fonts.
 */
const sans = SansFont({
  subsets: ['latin'],
  variable: '--font-sans-fallback',
  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
  preload: true,
  weight: ['300', '400', '500', '600', '700'],
});

/**
 * @heading
 * @description Define here the heading font.
 */
const heading = sans;

// we export these fonts into the root layout
export { sans, heading };

/**
 * @name getFontsClassName
 * @description Get the class name for the root layout.
 * @param theme
 */
export function getFontsClassName() {
  const font = [sans.variable, heading.variable].reduce<string[]>(
    (acc, curr) => {
      if (acc.includes(curr)) return acc;

      return [...acc, curr];
    },
    [],
  );

  return font;
}
```

To display a different font, please replace the imports from `next/font/google` if the font is there.

## 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/styles/shadcn-ui.css` and replace ` -apple-system, BlinkMacSystemFont` in the definition of the `--font-sans` variable with the font you want to use.