Adding Custom Font Classes to TailwindCSS

In this article we'll be taking a look at how to use Custom Fonts with TailwindCSS and make those available as Tailwind classes.

TailwindCSS is one of the most useful CSS frameworks to date and has tons of amazing features that make building beautiful UIs quick and simple.

A lot of its features come out-of-the-box and it's up to you to combine those building blocks into the UI you envision.

While that alone is awesome, TailwindCSS takes things a step further and allows you to configure custom options by extending the themes available in case you have specific needs that it just doesn't support.

The Goal

To learn how to use custom fonts, we're going to:

1. Get a basic React app started
2. Set up TailwindCSS
3. Add our custom font and configure it in TailwindCSS's config
4. Put the font to use!

I'll approach this from the very basics all the way up, so no worries if you don't know React or Tailwind yet!

In order to follow along you'll want to make sure you have NodeJS installed.

Setting Up React using create-react-app

The first thing we'll want to do is get a project going in React. We're going to use a tool called create-react-app to scaffold the project out for us.

Go ahead and use your terminal to navigate to a folder you'd like to generate your project in. Then run the following command to create a React application (name it whatever you want):

npx create-react-app react-tailwind-project

This should create a folder for your project, configure some things for you, and then give you instructions on how to manage your new application:

For now, we'll just navigate into the project and start our React application:

cd react-tailwind-project && npm start

This will start up your dev server at http://localhost:3000 and should look something like this.

Now we've got our starter, let's move on to setting up Tailwind!

You can stop your dev server by hitting CTRL + C in your terminal window

Setting Up Tailwind

Before we start initializing and configuring Tailwind in our project, we'll need to install a few dependencies it will need.

npm install -D tailwindcss postcss autoprefixer

We should have all the packages now we'll need to run TailwindCSS in our project. Next we'll initialize TailwindCSS.

npx tailwindcss init -p

This should generate a two files in your project:

• postcss.config.js (we won't touch this)
• tailwind.config.js

Go ahead and pop open that tailwind.config.js file. We need to tell Tailwind which files to care about in our project.

In the content array, add the following glob pattern to match any of our files that will be using Tailwind's classes and tools:

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind uses that to know which files to scan when generating the classes it needs during build time.

The last thing we'll need to get Tailwind set up and usable in our project is to import Tailwind's directives into our root index.css file at /src/index.css. Add these imports to the top of that file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Let's make sure this is all working. In /src/App.js, we'll add a Tailwind class to some of the text. How about we change the "Edit" instructions to a yellow color.

<p className="text-yellow-500">
  Edit <code>src/App.js</code> and save to reload.
</p>

If everything was set up properly you should see the text color change!

Adding Our Custom Font and Class

Now comes the part you've all been waiting for!

In Tailwind, we have a set of classes that allow us to change our font family, such as font-sans, font-serif, and font-mono. But what if we want to use a font that Tailwind doesn't have built in?

Fortunately, TailwindCSS allows us to build our own custom extensions of the theme to provide custom font families along with classes for those families.

The first thing we'll need to do is pick a font we like and import it into our index.css file.

I'll be using Google Fonts' Nova Flat, but feel free to pick your own!

In index.css after our Tailwind directive imports, import the font you like:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css?family=Nova+Flat');

At this point, the font is usable in our project, but I'm lazy and want Tailwind to build up a class for me automatically so I can use that font 🤣

To configure this, head back over to tailwind.config.js. Under the theme key, we can use the fontFamily key to add a custom font family to Tailwind.

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    fontFamily: {
      'nova-flat': '"Nova Flat"'
    },
    extend: {},
  },
  plugins: [],
}

If your font name has spaces, be sure to surround it in Quotes. Tailwind doesn't like spaces

If you want to add multiple families to nova-flat, you can add them either as a comma-separated list (e.g. '"Nova Flat", arial, mono') or turn that value into an array *(e.g. ['"Nova Flat"', 'arial', 'mono'])

After saving that, we will now have a new class available via Tailwind named font-<our name>. In my case it will be font-nova-flat.

Let's put it to use!

In /src/App.js, we'll change the font of the "Learn React" label to our new font...

<a
  className="App-link font-nova-flat"
  href="https://reactjs.org"
  target="_blank"
  rel="noopener noreferrer"
>
  Learn React
</a>

If everything was set up properly, your cool new font should show up!

Pretty awesome how Tailwind created a usable class for us that we can now use anywhere!

Wrapping Up

This example we looked at is just the beginning of the many options we have when configuring TailwindCSS to fit our picky, artsy needs 🎨

I definitely encourage you to check out all the things TailwindCSS has to offer!

Thanks so much for reading, hope you found this helpful!

Til' next time, and Happy Coding!

P.S. 🧠🔎

There is a shortcut to what we learned here.

Without configuring the theme extension in tailwind.config.js, we could have used what Tailwind calls an arbitrary value, which essentially is a class that we can pass a value.

In our case, our arbitrary value would have looked like font-['Nova_Flat'].