How to use custom fonts in Tailwind CSS

How do you work on your frontend projects? Let me guess: you get the UI designs and then you implement them. Or you create the designs yourself. Either way, the UI design will often come with custom fonts that you don’t already have.

If you’re building with Tailwind, this post will show you how to add both web fonts (Google Fonts) and locally installed fonts to your Tailwind projects. This will then ensure that you build your frontend projects with the right/required assets.

N.B., this post does not cover information about installing Tailwind or how to add Tailwind to a project. It assumes you already have it sorted and are looking to add custom fonts.

Jump ahead:

• Building with web fonts
• Tailwind and web fonts
• Customizing Tailwind
• Changing the default font in Tailwind CSS
• Building with locally installed fonts
  
  • Installing the font
  • Adding the local font to Tailwind
• Removing default Tailwind fonts

Building with web fonts

Web fonts are fonts specifically created to be applied to texts on a web page. A browser downloads the specified web fonts while it is rendering a web page and applies the fonts to the text on that page.

Web fonts live on a web server, so you can host your own web fonts on your hosting provider and use them. Alternatively, you can use web fonts from an external provider like Google web fonts.

In the article, we will work with the Poppins font. This is a Google web font designed by India Type Foundry and Jonny Pinhorn. The Poppins font is a popular design tool that features geometric sans serif typefaces. You can learn more about this font here or contribute to it here.

Tailwind and web fonts

Now let’s go over how to add web fonts to your Tailwind applications.

It would be best to have a small application to experiment with as we progress, so I’ve set up a starter project on GitHub.

To set up this Next. js and Tailwind project, follow the instructions in the Read.me file. Once you clone this project, run the following command to install the required dependencies:

npm install

Now, start the dev server by running this command:

npm run dev

You should see the following:

To work with the Poppins web font, add the code to import the web font to the global.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

Next, style the markup in the index.js component with the font-poppins class, like so:

export default function Home() {
  return (
    <section className="text-gray-600 body-font font-poppins">
      ...
    </section>
  );
}

In the above snippet, we added the font-poppins class to the section element of the index.js component. However, if we look at the output on the browser below, we won’t see the font take effect yet. We’ll address this in the next section as we learn how to customize Tailwind:

Customizing Tailwind

The Tailwind framework is built with customization in mind. By default, Tailwind searches the root directory for a tailwind.config.js file that contains all our customizations.

It appears our project is still using the default Tailwind font. Let’s tell Tailwind to use the Poppins font that we added instead.

Open your tailwind.config.js file and update the configuration to extend the Poppins font we just added:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend:
    {
      fontFamily: {
        'poppins': ['Poppins', 'sans-serif']
      },
    },
  },
  plugins: [],
}

What we are doing above is extending the default Tailwind configuration to expose a new font-poppins font family utility class. This means that it will exist alongside the Tailwind default font classes. Consequently, we can see the Poppins font applied to our project below:

This is also a plus for Tailwind’s utility-based styling concept. If we ever need to use the font anywhere else in the project, all we need to do is add the font-poppins class to the element and it should just work. This also makes it possible for us to set different fonts at different breakpoints if we want to.

Changing the default font in Tailwind CSS

When Tailwind processes our source CSS file, it does so using its default configuration under the hood. These configurations dictate the values of the Tailwind classes we use in our markup. For example, based on the default font size configuration, the class text-sm resolves to a font size of 0.875rem, and the class text-xl resolves to a font size of 1.25rem. Also, the class text-gray-500 resolves to a value of rgb(107 114 128), and the class text-gray-900 resolves to a value of rgb(17 24 39).

While Tailwind offers many options by default, it also enables you to extend the default configuration by adding your own classes or changing the properties of the default configuration. To do this, we use the tailwind.config.js file.

To create the tailwind.config.js file run the following command:

npm inx tailwind init

However, the starter project already contains a tailwind.config.js file. So, for this project, you should skip this step.

Now, extend the color and font-size configurations by updating the tailwind.config.js file, like so:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontSize: {
      title: `2.6rem;`,
      paragraph: `1.2rem;`
    },
    extend: {
      colors: {
        primary: {
          500: '#FF6363;',
          800: '#FF1313;',
        }
      },
      fontFamily: {
        poppins: ['Poppins', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

In the code above, we added a fontSize property to the theme object. This fontSize property contains our custom font sizes: title and paragraph. We added a new colors property that contains a primary color with two shades: 500 and 800.

We can apply these classes to style our component, like so:

export default function Home() {
  return (
    <section className="text-gray-600 body-font font-poppins">
      <div className="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
        <div className="text-center lg:w-2/3 w-full">
          <h1 className="title-font text-title mb-4 font-medium text-primary-800 ">
            Microdosing synth tattooed vexillologist
          </h1>
          <p className="mb-8 leading-relaxed text-primary-500 text-paragraph">
            Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing
            tousled. Chambray dreamcatcher trust fund, kitsch vice godard
            disrupt ramps hexagon mustache umami snackwave tilde chillwave ugh.
            Pour-over meditation PBR&amp;B pickled ennui celiac mlkshk freegan
            photo booth af fingerstache pitchfork.
          </p>
        </div>
      </div>
    </section>
  );
}

Now, if you check your browser you will see a new our project has a new look with these styles applied:

Building with locally installed fonts

This is a very interesting bit of this post. Whenever I Google “How to use custom fonts in Tailwind,” the results say little about using local/downloaded fonts. However, 90 percent of the time, that’s precisely what I’m looking for. As a result, I’ve added this section to show you how to use locally installed fonts in your Tailwind projects.

Installing the font

First things first, we need to find the font we want and install it. Usually, we can find it just by googling the name of the font. Next, download the font, unzip it, and install it locally on your machine.

Adding the local font to Tailwind

In the web fonts example, all we needed to do was add a link to the Google Font in our project’s HTML head tag. Things will be a little different this time.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

First, add the font to a public folder in your application. Then, import the font into your CSS file using the @font-face CSS rule like so:

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

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

@font-face {
  font-family: "ADELIA";
  src: url("../public/fonts/ADELIA.otf");
}

Using the font-face rule, we specify the font-family value of our custom font and then specify the path to the font file in our project via the src property.

At this point, we have successfully added a locally installed font to our Tailwind project. Next, let’s use it. Open the Tailwind config file and update the extend property as seen below:

...
extend: {
  colors: {
    primary: {
      500: '#FF6363;',
      800: '#FF1313;',
    }
  },
  fontFamily: {
    poppins: ['Poppins', 'sans-serif'],
    adelia: ["ADELIA", "cursive"],
  },
},
...

Just like we did with the Poppins font, here we are extending Tailwind’s fontFamily utility class to include the Adelia font we just added to the project. This will expose a font-adelia class for us to use across the project. To see this in action, update the HTML by adding the font-adelia class to the <section> tag as seen below:

export default function Home() {
  return (
    <section className="text-gray-600 body-font font-adelia">
     ...
    </section>
  );
}

Now you should see the updated font in the UI of our project:

And that’s it! We are now using a locally installed font in the project.

Removing default Tailwind fonts

Performance is of the utmost importance. It ensures a great user experience and we all generally like it when websites are fast. As a result, you might not want to ship any assets that you’re not using in production.

When that is the case and you want to get rid of any default fonts in your project before shipping, all you have to do is update your Tailwind config file like so:

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
        poppins: ["Poppins", "sans-serif"],
        adelia: ["ADELIA", "cursive"],
      },
  },
  plugins: [],
};

The difference is that we omitted the extend: {} object within the theme: {} object and directly specified values for fontFamily. This will ultimately override all default fonts and use only the ones we’ve specified.

In the interest of performance, Tailwind also has a purge feature that allows us to discard all unused CSS in production. You can optionally enable it by adding it to your config file like so:

// tailwind.config.js
purge: {
    enabled: true,
    content: [
        './**/*.html'
    ]
}

What are your go-to fonts for web projects? Share with me in the comments!

Conclusion

In this article, we investigated how to use custom fonts in Tailwind. We worked with both web fonts and local fonts. We also learned how to extend Tailwind’s default configuration by adding our customizations to the tailwind.config.js file.

I hope this tutorial helps improve your Tailwind knowledge and that you can use your customizations with Tailwind going forward.

If you are interested in the source code for the small application we created, you can find it on GitHub.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — Start monitoring for free.