How to add custom font with tailwind css?

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.