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.

--

--

Ayyaz Zafar
Ayyaz Zafar

Written by Ayyaz Zafar

Enrol my Angular 18 course | Build FullStack Blog with CMS in Angular, Node, MySQL, Angular Material, Tailwind CSS https://bit.ly/angular-18-course