How to Add Google Fonts in TailwindCSS – Complete Guide

In almost every project, you are going to use Google fonts to make your website look beautiful. Adding new fonts in TailwindCSS is a bit tricky and unfortunately, the official documentation doesn’t explain this thing well enough. In this article, you will learn how to add Google fonts step by step with a working demo at the end.

Step 1: Choose Your Google Fonts

The very first step to adding new fonts is to go to Google Fonts and choose the fonts you want to use in your project. In this example, we are going to use a very popular and beautiful font called Poppins. After choosing your fonts, you need to get the import link from google fonts. Click on the + icon to create an import link.

add new fonts in tailwindcss

After selecting the fonts, you will see a popup with a font to import and download. You have to get the URL to import the files. You need to get the @import URL to use in your project.

how to add new fonts in tailwindcss

Step 2: Import Google Fonts into Tailwind Input File

The next is to add the URL to your Tailwind input file. So, go and add @import url(''); at the top of the three layers of TailwindCSS.


Step 3: Add Font Name in Tailwind Config File

Now, go to your tailwind.config.js and extend the fontFamily. Add your font name with whatever you wanna call it but make sure you are using the exact font name that Google Fonts provided.

Step 4: Use Your Google Fonts in HTML

You have successfully imported the Google fonts into your TailwindCSS project. All you need to do is to use the fonts you imported. Your fonts will be available with the name you defined in the config file. In the example above, we have defined the font name as primary so we’ll be using `font-primary’ in our code. Here is an example of how you will be using the fonts.

The working demo of the above example is on

Pro Tip:

You can add your imported fonts to the body tag if you want to use them on your entire web page.

If you are wishing to override the existing default fonts with the new fonts you just imported, check this guide on official documentation.


Adding new fonts in TailwindCSS is not a difficult job at all but a bit tricky. You can add Google fonts in TailwindCSS by importing the Google fonts in your tailwind input file, defining the font name and using the imported fonts. In the end, use your fonts in your HTML.




Latest articles

Leave a reply

Please enter your comment!
Please enter your name here

Related articles