Getting started

System

Components

Extra

How to add font to your project

This guide will walk you through different methods to add font to your project, using the Inter font as an example.

Download the selected font

On the theme page, when you select a font, a link to its Google Fonts page is provided. Simply click this link and download the font.

If you need guidance:

  1. Click "Get font" in the top-right corner of the Google Fonts page.
  2. Click "Download all".

You will receive a ZIP file containing all the font files in various formats. On this page, you can also find the code to embed the font via CDN ("Get embed code").

Add the font to your project

You have two main options for adding the font:

  1. Self-hosting (Local): Download the font files and serve them from your own server.
  2. CDN (Google Fonts): Link to the font hosted on Google's servers.

How to choose?

  • Choose Self-hosting if your priority is performance, privacy, and independence from third-party services.
  • Choose CDN for the simplest and fastest setup.

Self-hosting (local connection)

Self-hosting gives you full control, better privacy, and consistent performance since your site doesn't depend on external services.

For HTML, Rails, or Laravel projects:

  1. Add font files: Create a fonts folder in your project and place the downloaded files (e.g., Inter-Regular.woff2, Inter-Bold.woff2) there.
  2. Declare the font in your CSS:
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

For Rails projects specifically, place fonts in app/assets/fonts/ and use the Rails asset pipeline path helpers, like font-url().

For React or Vue projects:

  1. Add font files: Place them in a src/fonts/ or public/fonts/ directory.
  2. Import and declare the font in a CSS file (e.g., App.css, fonts.css):
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

In React, import this CSS file into your main component (e.g., import './fonts.css' in App.jsx).

Connection via Google Fonts CDN

This method is simpler but makes your site dependent on an external service.

For HTML, Rails, or Laravel Projects:

Add this code to the <head> section of your HTML or layout file:

<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=Inter:wght@400;700&display=swap" rel="stylesheet">

For React or Vue Projects:

Add the same <link> tags shown above to the <head> of your public/index.html file.

Performance tips

  1. Always use font-display: swap in your @font-face rules. This prevents invisible text while the font loads.
  2. Preload critical fonts. For self-hosted fonts, add this to your HTML <head> to load them earlier: 
    <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
  3. Use WOFF2 format. It offers the best compression, making files significantly smaller than WOFF.
  4. Only load the font weights and styles you actually need in your project to minimize file size.

On this page