• 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
  • Global Configuration
    • Environment Variables
    • Feature Flags
  • Server Actions
    • Sending CSRF Token to Actions
    • Server Actions Error Handling
  • The Makerkit SDK
    • User SDK
    • Organization SDK
    • Organization Subscription SDK
    • Data Loader SDK
  • Architecture and Folder Structure
    • Structure your Application
    • Data Model
    • Adding API Routes
    • Change Authentication strategy
    • Fetching the signed in User
    • Reading Records from Postgres
    • Creating a Record
    • Seeding Local Data
    • Introduction
    • Configuring Plans
    • Project Configuration
    • Updating the Navigation menu
    • Adding a new translation string
    • Supabase is not starting
    • Calling API Routes from the client
    • Adding Pages
    • Updating the Sidebar menu
    • Setup oAuth
    • Fetching the selected Organization
    • Resetting the local DB
    • Running the Stripe Webhook locally
    • Branding
    • Setting a Default Language
    • Supabase is not stopping
    • Dark Theme
    • Theming
    • API Routes vs Server Actions
    • Generating Database Types
    • Updating the Logo
    • Adding a new language in the Next.js Supabase SaaS Kit
    • Tables/Functions not found
    • Updating the Fonts
    • Adding Pages
    • Adding a new translation file
    • Contentlayer gets stuck
    • Guarding Pages
    • Using Lemon Squeezy instead of Stripe
    • Updating the Favicons
    • Using the Language Switcher
    • Dynamic server usage error
    • Environment variables
    • Detect current Locale
    • 403 error with API/Actions
    • Setting up Emails
This documentation is for a legacy version of Next.js and Supabase. For the latest version, please visit the Next.js and Supabase V2 documentation

Updating the fonts of your Makerkit site

Learn how to update the fonts of your Makerkit landing pages

By default, Makerkit defines the site's fonts using the package next/font/google.

The fonts are defined at src/components/Fonts.tsx and you can update them to your liking.

What fonts are used by default?

By default, Makerkit uses the system Apple font on Apple devices, the Inter font as fallback.

Removing Apple font as default

If you want to remove the Apple font as default, simply update the FontsFamily component at src/components/Fonts.tsx to remove the Apple font.

src/components/Fonts.tsx
'use client';
import { Inter as SansFont } from 'next/font/google';
import { useServerInsertedHTML } from 'next/navigation';
const sans = SansFont({
subsets: ['latin'],
variable: '--font-family-sans',
fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
preload: true,
weight: ['300', '400', '500', '600', '700', '800'],
});
// replace with your heading font
// by default, it will use the sans font
const heading = sans;
function Fonts() {
useServerInsertedHTML(() => {
return (
<style
key={'fonts'}
dangerouslySetInnerHTML={{
__html: `
:root {
--font-family-sans: ${sans.style.fontFamily}, 'Segoe UI', 'Roboto', 'Ubuntu', 'sans-serif';
--font-family-heading: ${heading.style.fontFamily};
}
`,
}}
/>
);
});
return null;
}
export default Fonts;

If you compare the above with the version of the file you have in your project, you'll notice that we removed the --apple-system fonts.

Using a different font

If you want to use a different font, you can import it from the next/font/google package.

For example, below, we import the font Manrope from Google Fonts. It replaces Inter as the default font.

tsx
import { Manrope as SansFont } from 'next/font/google';

You can use two different fonts for the --font-family-sans and --font-family-heading variables. One is used an the main body font, the other as the heading font.