Adding Custom Font Classes to TailwindCSS
Tags: react, tailwindcss, javascript, css
Published: 2022-01-18 05:29:12

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](https://nodejs.org) 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`](https://create-react-app.dev/) 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)*:

```sh
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:

![Jan-17-2022 18-23-04.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1642472608819/RL_Kwk9iI.gif)

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

```sh
cd react-tailwind-project && npm start
```

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

![Screen Shot 2022-01-17 at 6.26.29 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1642472796966/y00K3xumq.png)

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.

```sh
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.

```sh
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:

```js
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.

```css
@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.

```html
<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!

![Screen Shot 2022-01-17 at 8.48.38 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1642481322166/PtRXOkB7Z.png)

---

## 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`](https://fonts.google.com/specimen/Nova+Flat), but feel free to pick your own!

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

```css
@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.

```js
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...

```html
<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! 

![Screen Shot 2022-01-17 at 9.15.44 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1642482949662/GlpluFZCu.png)

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](https://tailwindcss.com/docs/installation) 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']`.