How to add custom font with tailwind css?

Ayyaz Zafar
3 min readOct 29, 2023

If you’re building a project using Tailwind CSS, one of the most essential customisations you might consider is adding a custom font to your design. In this article, we’ll walk you through the process of integrating custom fonts, both from Google Fonts and locally downloaded font files.

Prerequisites

Before diving into the tutorial, ensure that you have Tailwind CSS set up in your development environment. If you’re unfamiliar with Tailwind CSS or haven’t set it up yet, check out a comprehensive tutorial on how to get started.

1. Adding a Google Font

  1. Visit the Google Fonts website.
  2. Search and select the font you prefer. For this example, let’s go with “Roboto”.

3. Choose the desired font styles or variants.

4. You’ll notice two methods to integrate the font into your project: the link tag and the @import statement. Copy the @import statement.

5. Open your project’s CSS file and paste the import statement at the top.

6. Next, open tailwind.config.js. In the extend section, add fontFamily and define the font's name. For instance:

module.exports = {
extend: {
fontFamily: {
'roboto': ['Roboto', 'sans-serif']
}
}
}

7. In your HTML file, apply the font using the class name you defined. For example:

<h1 class="font-roboto">Hello, World!</h1>

2. Adding a Locally Downloaded Font

  1. Download the desired font, ensuring you have files in formats such as .otf or .woff.
  2. Store the font files in your project’s assets or another preferred directory.

--

--