Install fonts

Which fonts to install

Open Sans is our default font.

Noto Sans is used for languages not supported by Open Sans.

Writing system	Font
Latin, Cyrillic, Greek, Hebrew	Open Sans
Arabic	Noto Sans Arabic
Chinese (Simplified)	Noto Sans SC
All others	Noto Sans (search by language)

Various ways to install the fonts

There are multiple ways to install and use the font, depending on your project requirements.

Note

The theme automatically configures the font-sans variable for Tailwind CSS. Once the font is available in your project, no additional configuration is required.

Host fonts locally

For better performance, you can host the font files locally. This is recommended for production applications.

Step 1: Download font files

Download WOFF2 files from Fontsource

Step 2: Add fonts to your project

Place the necessary font files in your public/fonts directory:

public/
  fonts/
    open-sans-latin-400-normal.woff2
    open-sans-latin-500-normal.woff2
    open-sans-latin-600-normal.woff2
    open-sans-latin-700-normal.woff2
    …

Note

Configure the language subsets and font weights based on your project needs. The example above shows the Latin subset and weights 400–700.

Step 3: Define font-face

Add the @font-face declarations to your CSS:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/open-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/open-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/open-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Use cases

Production applications requiring optimal performance
Projects with strict privacy requirements (no external requests)
Offline-first applications
Better control over caching and loading strategies

Use Fontsource package

Fontsource is an npm package that allows you to self-host fonts with ease. It provides optimized font files and handles all the @font-face declarations for you.

Installation

Install the font package from Fontsource:

pnpm add @fontsource/open-sans

Usage

Import the fonts in your main entry file, e.g. app/layout.tsx or src/main.tsx:

import "@fontsource/open-sans/400.css";
import "@fontsource/open-sans/500.css";
import "@fontsource/open-sans/600.css";
import "@fontsource/open-sans/700.css";

The fonts will automatically be available in your CSS.

Use cases

Self-hosted fonts with npm package management
Automatic font optimization and subsetting
Better control over font loading and bundling
Version-controlled font dependencies
No external requests (privacy-friendly)

Use Next.js font optimization

Next.js provides built-in font optimization through next/font. This method automatically optimizes fonts, with zero layout shift.

More information: Optimizing: Fonts | Next.js

Install fonts

On this page