How to use custom fonts in Tailwind CSS

Editor’s note: This article was last reviewed and updated by Nwani Victory on 13 December 2024.

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

Web fonts live on a web server, so you can host your own fonts on your hosting provider and use them. Alternatively, you can use web fonts from an external provider like Google Fonts. In the article, we will work with the Poppins font. This is a popular design tool that features geometric sans serif typefaces. You can learn more about this font here or contribute to it here.

If you’re building with Tailwind, this post will guide you on how to use Google Fonts in CSS and locally installed fonts to enhance your Tailwind projects. Learn how to perform a Google font import in CSS for better integration and design.

N.B., This post assumes you’re already familiar with installing Tailwind CSS and focuses solely on adding custom fonts.

Tailwind CSS and web fonts

Tailwind CSS is a utility-first CSS framework that allows you to build custom designs without ever leaving your HTML. It comes with a set of utility classes that you can use to style your elements without having to write any CSS code.

Tailwind CSS is a great tool for building websites, but it doesn’t have any built-in support for web fonts like Google Fonts. This means that if you want to use custom fonts in your project, you will have to add them yourself. But don’t worry, it’s not as hard as it sounds!

This article will show you how to add custom fonts to your Tailwind CSS project using Google Fonts. We will also show you how to add custom fonts to your Tailwind CSS project using locally installed fonts and through the Tailwind CSS Typography plugin.

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 README file. Once you clone this project, run the following command to install the required dependencies:

npm install

Then, start the dev server by running this command:

npm run dev

You should see the following:

Now, let’s add some custom fonts to this project.

Creating new font families in Tailwind

Tailwind CSS offers the flexibility to define and integrate custom font families into your project, which you can incorporate alongside existing font families. Let’s explore how to create and apply custom font families in Tailwind:

1. Extending the Tailwind configuration

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

To create the tailwind.config.js file, run the following command, which uses the npx CLI:

npx tailwind init

Our starter project already contains a tailwind.config.js file. Open the file and navigate to the theme section. Define your custom font families within the fontFamily key:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        customFont: ['"Custom Font"', "sans-serif"],
        // Add more custom font families as needed
      },
    },
  },
  // Other Tailwind configuration settings
};

Replace Custom Font with the name of your desired font family. You can specify multiple fallback font families in case the primary one isn’t available.

2. Applying the custom font family

Now that we’ve defined our custom font family, we can apply it to any element in our project. To do this, we need to add the font family to the element’s class attribute:

<p className="font-customFont">...</p&gt;

Integrating Google Fonts with Tailwind CSS for custom styling

Google Fonts are a great way to add custom fonts to your website. They are free, easy to use, and have a wide variety of fonts to choose from. Tailwind recommends integrating Google Fonts through the Tailwind CSS Typography plugin for the best rendering performance. Alternatively, you can use Google Fonts with the following methods:

1. Using npm packages such as the google-fonts plugin as a third-party solution
2. Using the CDN link
3. Using the @import rule
4. Downloading the font files

Using the Tailwind CSS Typography plugin

Execute the following command to install the Typography plugin in your project as a development dependency ( -D ):

npm install -D @tailwindcss/typography

Next, you must list the @tailwindcss/typography as a plugin in your tailwind.config.js configuration file:

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [
    require("@tailwindcss/typography"),
  ],
};

To use the Typography plugin to style fonts, you will need to specify the prose class for the element(s).

Using the CDN link

Another way to use Google Fonts in Tailwind CSS is to add the CDN link to your index.html file, or in our case, the _document.js file, as we are using Next.js:

// _document.js
<Head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
    rel="stylesheet"
  />
</Head>

Next, we must add the font family to the tailwind.config.js file.

Customizing Tailwind to use the font

Let’s tell Tailwind to use the Poppins font that we added instead. Open up your tailwind.config.js file and update the configuration to inherit and extend from fontFamily.sans:

/** @type {import('tailwindcss').Config} */
const { fontFamily } = require("tailwindcss/defaultTheme");

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        poppins: ["Poppins", ...fontFamily.sans],
      },
    },
  },
  plugins: [],
};

We are 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.

This is also a benefit 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 work. This also makes it possible for us to set different fonts at different breakpoints if we want to.

Now, let’s use the font in our project. Open up the index.js file and add the font-poppins class to the section element:

// index.js
<section className="font-poppins text-gray-600">
  ...
</section>

Now, let’s see what we have:

Our custom font is now applied to the text in our project.

Using the @import CSS rule

Another way to integrate Google Fonts in Tailwind CSS is to use the @import rule. This rule allows you to import a CSS file into another CSS file, which is useful when you want to use a CSS file that is not in the same directory or folder as the CSS file you are importing it into.

The CSS file can also be on a different server or even on a different domain. We will use it to import the Google Fonts CSS file into our Tailwind CSS file.

To use the @import rule, we need to add the Google Fonts CSS file to our global.css file:

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

To test this out, remove the CDN link from the _document.js file.

Now, let’s see what we have:

Our font is still applied to the text in our project.

Using local fonts and Google font import in CSS with Tailwind

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. This section explains how to use locally installed fonts alongside Google Fonts, giving you the flexibility to style your Tailwind project.

Starting with the v3 release, Tailwind CSS recommends adding local fonts via modern bundler workflows such as unplugin-fonts or postcss-font-magician to simplify font loading and improve the developer experience.

To begin, we need to find and install a font. In this example, we will use the Oswald font, a Google web font that was created by Vernon Adams, Kalapi Gajjar, and Cyreal.

To install Oswald, we need to download the font files from the Google Fonts website. Search for the font you want and click on the Download family button. This will download a zip file containing the font files:

Once the download is complete, unzip the file and copy the font files into the public/fonts folder in your project. If you don’t have a fonts folder, create one.

Install the unplugin-fonts package into your demo TailwindCSS project using the following command:

npm i unplugin-fonts

Next, register unplugin-fonts as a plugin in your tailwind.config.js file to use the Oswald local font:

const { fontFamily } = require("tailwindcss/defaultTheme");
const Unfonts = require("unplugin-fonts");

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontSize: {
      title: `2.6rem;`,
      paragraph: `1.2rem;`,
    },
    fontFamily: {
      poppins: ["Poppins", ...fontFamily.sans],
      adelia: ["ADELIA", "cursive"],
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
    Unfonts.default.vite({
      custom: {
        families: [
          {
            name: "Oswald",
            local: "Oswald",
            src: "./public/fonts/Oswald-VariableFont_wght.ttf",
          },
        ],
      },
    }),
  ],
};

An alternative way to add local fonts with Tailwind CSS is through the @font-face directive in CSS files.

We need to add the font files to the global.css file:

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

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

@font-face {
  font-family: "Oswald";
  src: url("../public/fonts/Oswald-VariableFont_wght.ttf");
}

Then, add the font family to the tailwind.config.js file:

const { fontFamily } = require("tailwindcss/defaultTheme");

// tailwind.config.js
module.exports = {
    ...
  theme: {
    fontFamily: {
      poppins: ["Poppins", ...fontFamily.sans],
      oswald: ["Oswald", ...fontFamily.sans],
    },
  },
  plugins: [],
};

Now, let’s use the font in our project. Open up the index.js file and add the font-oswald class to the h1 element:

// index.js
<h1 className="font-oswald text-primary-800 mb-4 text-4xl font-medium">
  Microdosing synth tattooed vexillologist
</h1>

Now, let’s see what we have:

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

Changing the default font in Tailwind CSS

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.

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

const { fontFamily } = require("tailwindcss/defaultTheme");

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          500: "#FF6363;",
          800: "#FF1313;",
        },
      },
    },
    fontSize: {
      title: `2.6rem;`,
      paragraph: `1.2rem;`,
    },
    fontFamily: {
      poppins: ["Poppins", ...fontFamily.sans],
      oswald: ["Oswald", ...fontFamily.sans],
    },
  },
  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="font-poppins text-gray-600">
      <div className="container flex flex-col items-center justify-center px-5 py-24 mx-auto">
        <div className="lg:w-2/3 w-full text-center">
          <h1 className="font-oswald text-primary-800 mb-4 text-4xl font-medium">
            Microdosing synth tattooed vexillologist
          </h1>
          <p className="text-primary-500 mb-8 leading-relaxed">
            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>
          <p class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl">
            Dynamic Font Sizing
          </p>
        </div>
      </div>
    </section>
  );
}

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

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 configs in your project before shipping, all you have to do is update your Tailwind config by removing the configs you are not using:

const { fontFamily } = require("tailwindcss/defaultTheme");

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      poppins: ["Poppins", ...fontFamily.sans],
      oswald: ["Oswald", ...fontFamily.sans],
    },
  },
  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.

Starting from the v3 release, the JIT (Just-In-Time) engine for Tailwind CSS automatically removes unused CSS within production builds, without needing a purge configuration in the tailwind.config.js file.

If you have a legacy project using older versions of Tailwind CSS, the deprecated purge feature allows you to discard all unused CSS in production builds. You enable it by adding the purge key to the config of your old project like so:

const { fontFamily } = require("tailwindcss/defaultTheme");

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  purge: {
    enabled: true,
    content: [
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./components/**/*.{js,ts,jsx,tsx}",
    ],
  },
  theme: {
    fontFamily: {
      poppins: ["Poppins", ...fontFamily.sans],
      oswald: ["Oswald", ...fontFamily.sans],
    },
  },
  plugins: [],
};

Responsive font sizing with Tailwind CSS

Responsive, or dynamic, font sizing is a technique that allows you to change the size of your UI elements based on the size of the screen. This is useful when you want to ensure your UI elements are readable on all devices, regardless of their screen size.

Tailwind provides responsive text classes that allow you to set different font sizes based on the screen size. To implement dynamic font sizing in Tailwind CSS, you can leverage Tailwind’s utility classes along with responsive design principles. Here’s how you can achieve dynamic font sizing:

<p class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl">
  Dynamic Font Sizing Using Responsive Text Classes
</p>

In the example above, we are using the text-sm class to set the font size to 12px on the smallest screens. Then, we use the sm:text-base class to set the font size to 16px on small screens. We are using the md:text-lg class to set the font size to 18px on medium screens. We use the lg:text-xl class to set the font size to 20px on large screens. Finally, we are using the xl:text-2xl class to set the font size to 24px on extra-large screens.

An alternative method for implementing dynamic font sizing with Tailwind CSS is using clamp arbitrary values. While introducing a clamp utility class is still being discussed, you can have a clamp arbitrary value to make your text responsive without having to add multiple breakpoint classes:

<p class="text-[clamp(1rem, 2.5vw, 2rem)]"> Dynamic Font Sizing with Clamp </p> 

And that is all for customizing fonts in Tailwind CSS!

Conclusion

In this article, we explored how to use Google Fonts in CSS and integrate them into your Tailwind CSS projects. From performing a Google font import in CSS to configuring local fonts, we’ve covered all the essentials for styling your frontend effectively. Use these methods to improve your font management and your Tailwind designs.

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