How to use custom fonts in Tailwind CSS - LogRocket Blog (2024)

Editor’s note: This article was last updated on 14 December 2023 to include information about creating new font families in Tailwind, and the three main ways to integrate Google Fonts with 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 correct assets.

N.B., This post does not cover information about installing Tailwind or how to add Tailwind to a project. It assumes you already understand that and are looking to add custom 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 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.

Tailwind and web fonts

As we know, 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. 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.

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 READMEfile. 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:

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:

npm inx 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.jsmodule.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

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. There are three ways to use Google Fonts in Tailwind CSS:

1. Using the CDN link
2. Using the @import rule
3. Downloading the font files

Using the CDN link

The first 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 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: [],};

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 just 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 rule

The second way to use 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.

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. So, I’ve made sure to include this section in this tutorial.

First things first, we need to find the font we want and install it. This time, 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.

Next, 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:

// tailwind.config.jsmodule.exports = { ... theme: { fontFamily: { poppins: ["Poppins", "sans-serif"], oswald: ["Oswald", "sans-serif"], }, }, 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 the 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:

// tailwind.config.jsmodule.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", "sans-serif"], oswald: ["Oswald", "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="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:

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

Dynamic font sizing with Tailwind

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.

And that is all for customizing fonts in Tailwind CSS. 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.