• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
    • Tailwind CSS
    • Updating the theme
    • Updating the Logo
    • Adding Shadcn UI components to your application | Next.js Supabase SaaS Kit
    • Updating Fonts
    • Layout Style

Update the default fonts of your SaaS

Learn how to update the fonts of your Makerkit application

By default, Makerkit uses two fonts:

  1. font-sans: using Apple's default font on Apple devices, or Inter on others
  2. font-heading: uses Urbanist from Google Fonts

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

tsx
import { Urbanist as HeadingFont, 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: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
preload: true,
weight: ['300', '400', '500', '600', '700'],
});
/**
* @heading
* @description Define here the heading font.
* By default, it uses the Urbanist font from Google Fonts.
*/
const heading = HeadingFont({
subsets: ['latin'],
variable: '--font-heading',
fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
preload: true,
weight: ['500', '700'],
});
// 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.css and replace -apple-system with the font you want to use.

On this page
  1. Removing Apple's system as default font on Apple Devices