Fonts

This guide covers the font system in your MkSaaS website, how to use the built-in fonts, and how to add and customize your own fonts.

Core Features

The MkSaaS template comes with a carefully selected set of fonts that provide excellent readability and visual appeal. The font system includes:

Multiple font families for different purposes (sans-serif, serif, monospace)
Google Fonts integration for easy access to thousands of fonts
Support for local font files
CSS variable-based configuration for simple customization

Default Fonts

The template includes several pre-configured fonts that you can use out of the box.

Built-in Font Families

The following font families are available by default:

Noto Sans: The main sans-serif font used for most text
Noto Serif: A serif font that can be used for headings or body text
Noto Sans Mono: A monospace font used for code blocks and technical content
Bricolage Grotesque: A modern sans-serif font for decorative elements or headings

These fonts are loaded from Google Fonts and are configured in the src/assets/fonts/index.ts file:

src/assets/fonts/index.ts

import {
  Bricolage_Grotesque,
  Noto_Sans,
  Noto_Sans_Mono,
  Noto_Serif,
} from 'next/font/google';

// Noto Sans with selected weights
export const fontNotoSans = Noto_Sans({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-noto-sans',
  weight: ['500', '600', '700'],
});

// Noto Serif
export const fontNotoSerif = Noto_Serif({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-noto-serif',
  weight: ['400'],
});

// Noto Sans Mono
export const fontNotoSansMono = Noto_Sans_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-noto-sans-mono',
  weight: ['400'],
});

// Bricolage Grotesque with multiple weights
export const fontBricolageGrotesque = Bricolage_Grotesque({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-bricolage-grotesque',
  weight: ['400', '500', '600', '700'],
});

Font Configuration

The fonts are applied to the application in the root layout component:

src/app/[locale]/layout.tsx

import {
  fontBricolageGrotesque,
  fontNotoSans,
  fontNotoSansMono,
  fontNotoSerif,
} from '@/assets/fonts';
import { cn } from '@/lib/utils';

// Inside the layout component
<body
  suppressHydrationWarning
  className={cn(
    'size-full antialiased',
    fontNotoSans.className,
    fontNotoSerif.variable,
    fontNotoSansMono.variable,
    fontBricolageGrotesque.variable
  )}
>
  {/* Layout content */}
</body>

Notice that fontNotoSans.className is applied directly, making it the default font for the entire website, while the other fonts are applied as CSS variables that can be used throughout the application.

CSS Variables

The font variables are defined in the global CSS file and can be used in your Tailwind CSS classes:

src/styles/globals.css

@theme inline {
  /* font */
  --font-sans: var(--font-noto-sans);
  --font-mono: var(--font-noto-sans-mono);
  --font-serif: var(--font-noto-serif);
  --font-bricolage: var(--font-bricolage-grotesque);
  
  /* other variables */
}

Adding Custom Fonts

You can add custom fonts to your website in two ways: using Google Fonts or local font files.

Adding Google Fonts

To add a new Google Font:

Import the font from next/font/google
Configure the font with appropriate options
Export the font variable

For example, to add the Roboto font:

src/assets/fonts/index.ts

import { Roboto } from 'next/font/google';

export const fontRoboto = Roboto({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto',
  weight: ['400', '500', '700'],
});

You can explore the Google Fonts website to find the perfect font for your website.

Adding Local Fonts

To use a local font file:

Download the font files (preferably in WOFF2 format for best performance)
Place the font files in the src/assets/fonts directory
Import localFont from next/font/local
Configure the font with appropriate options

For example:

src/assets/fonts/index.ts

import localFont from 'next/font/local';

// Local font example
export const fontCustom = localFont({
  src: './CustomFont.woff2',
  variable: '--font-custom',
});

You can download font files from Google Webfonts Helper.

Using the New Font

After adding a new font, you need to:

Update the layout component to include the new font variable:

src/app/[locale]/layout.tsx

import { fontCustom } from '@/assets/fonts';

// Inside the layout component
<body
  className={cn(
    'size-full antialiased',
    fontNotoSans.className,  // Default font
    fontNotoSerif.variable,
    fontNotoSansMono.variable,
    fontBricolageGrotesque.variable,
    fontCustom.variable      // New font variable
  )}
>
  {/* Layout content */}
</body>

Optionally, add a CSS variable in globals.css:

src/styles/globals.css

@theme inline {
  /* font */
  --font-sans: var(--font-noto-sans);
  --font-mono: var(--font-noto-sans-mono);
  --font-serif: var(--font-noto-serif);
  --font-bricolage: var(--font-bricolage-grotesque);
  --font-custom: var(--font-custom);  /* New font variable */
  
  /* other variables */
}

Changing the Default Font

To change the default font for your entire website:

Choose which font you want to set as the default
Update the layout component to use that font's className property instead of fontNotoSans.className:

src/app/[locale]/layout.tsx

<body
  className={cn(
    'size-full antialiased',
    fontCustom.className,    // This is now the default font
    fontNotoSans.variable,   // Noto Sans is now available as a variable
    fontNotoSerif.variable,
    fontNotoSansMono.variable,
    fontBricolageGrotesque.variable
  )}
>
  {/* Layout content */}
</body>

This screenshot shows the default font is now the custom font.

Custom Font

Font Usage Examples

Here are some examples of how to use the different fonts in your components:

// Using the default font (no need to specify)
<p>This text uses the default font.</p>

// Using a specific font family with Tailwind CSS
<h1 className="font-serif">This heading uses the serif font</h1>

// Using monospace font for code
<code className="font-mono">console.log('Hello, world!');</code>

// Using the decorative font for a special heading
<h2 className="font-bricolage">Special Section</h2>

// Using a custom font (if added)
<p className="font-custom">This text uses a custom font.</p>

Font Subsetting and Performance

Next.js automatically subsets Google Fonts to include only the characters needed for the languages you specify, which improves performance.

The subsets parameter specifies which character sets to include:

export const fontNotoSans = Noto_Sans({
  subsets: ['latin'],  // Only include Latin characters
  // ...other options
});

For multilingual websites, you can include additional subsets:

export const fontNotoSans = Noto_Sans({
  subsets: ['latin', 'cyrillic', 'greek'],  // Support multiple alphabets
  // ...other options
});

Advanced Font Customization

Font Display Strategy

The display property controls how the font is loaded and displayed:

export const fontNotoSans = Noto_Sans({
  display: 'swap',  // Use fallback font until custom font loads
  // ...other options
});

Options include:

'swap': Show a fallback font until the custom font loads (prevents invisible text)
'block': Briefly show invisible text, then fallback, then custom font
'fallback': Similar to swap but with a shorter timeout
'optional': Let the browser decide whether to use the custom font based on connection

Adjusting Font Weights

You can specify which font weights to include to optimize performance:

export const fontNotoSans = Noto_Sans({
  weight: ['400', '500', '700'],  // Only include regular, medium, and bold
  // ...other options
});

This is important for performance as each additional weight increases the amount of font data that needs to be downloaded.

Best Practices

Limit Font Families: Use no more than 2-3 font families on your website for a cohesive look
Limit Font Weights: Include only the weights you actually need (typically regular, medium, and bold)
Use WOFF2 Format: For local fonts, use WOFF2 format for the best compression and performance
Test Performance: Check your website's performance after adding custom fonts
Consider Fallbacks: Specify appropriate fallback fonts using Tailwind's font family utilities
Accessibility: Ensure your chosen fonts are readable for all users, especially for body text

Core Features

Default Fonts

Built-in Font Families

Font Configuration

CSS Variables

Adding Custom Fonts

Adding Google Fonts

Adding Local Fonts

Using the New Font

Changing the Default Font

Font Usage Examples

Font Subsetting and Performance

Advanced Font Customization

Font Display Strategy

Adjusting Font Weights

Best Practices

Next Steps

Themes

Images

Environment Setup

Website Configuration

Table of Contents