Update the default fonts of your SaaS

Learn how to update the fonts of your Makerkit application

By default, Makerkit uses Apple's default font on Apple devices, or Inter on others.

The fonts are defined at 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 };

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.