How to add google fonts to Tailwind CSS custom config (NextJS example)

This post will show you how to add custom Google Fonts like Inter and Roboto to your Tailwind JS project and extend the default config. Using the methods shown will let you use default tailwind font classes like and and apply custom Google fonts without the need to import fonts directly.

First step: choose the fonts

Go to Google Fonts and pick a few fonts you wish to add to your Tailwind site.

Once you have found some load your project and get ready to add the fonts.

Add the google fonts npm package

For our example we will use the NextJS google font package to import our custom fonts:

You can install this package using . If you are not using NextJS simply import the fonts directly into your HTML using link tags.

Create JS variables for the font families

Then we create JS variables for each subset of font we want to use and assign it a CSS variable.

Do the same for other fonts:

Create custom css variables

Now inject the css variables into your application. For a Next JS project we can add a tag to our entrypoint file.

Load the fonts into Tailwind config

The last step is to wire the variables into the so that default font classes apply our selected fonts:

Using the fonts

You can now apply the custom fonts using the Tailwind font classes such as :

We can even apply different fonts based on print or screen media. For more examples see the blog.