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

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.

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

Self-host fonts (Recommended)

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

Download font files from Google Fonts or use google-webfonts-helper to download optimized subsets. We recommend using WOFF2 format. Be sure to include font weights 400, 500, 600, 700.

Step 2: Add fonts to your project

Place the font files in your public/fonts directory, for example:

open-sans-latin-400.woff2

open-sans-latin-500.woff2

open-sans-latin-600.woff2

open-sans-latin-700.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.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/open-sans-latin-600.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.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 Google Fonts CDN

Serve fonts from the Google Fonts CDN, by adding a <link> tag to your HTML.

Privacy note

When a user’s browser requests a font from Google’s servers, the user’s IP address is shared with Google.

Step 1: Add the link tag

Add the following code to the <head> of your HTML document:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

For projects using multiple fonts (e.g. Arabic support):

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>