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.
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.
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 README 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:
Now, let’s add some custom fonts to this project.
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:
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.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.
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>
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:
@import
ruleThe 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.
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.
@import
ruleThe 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.
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.js module.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.
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.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", "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&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:
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.js module.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.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", "sans-serif"], oswald: ["Oswald", "sans-serif"], }, }, plugins: [], };
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!
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.
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.
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.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowMaking carousels can be time-consuming, but it doesn’t have to be. Learn how to use React Snap Carousel to simplify the process.
Consider using a React form library to mitigate the challenges of building and managing forms and surveys.
In this article, you’ll learn how to set up Hoppscotch and which APIs to test it with. Then we’ll discuss alternatives: OpenAPI DevTools and Postman.
Learn to migrate from react-native-camera to VisionCamera, manage permissions, optimize performance, and implement advanced features.
6 Replies to "How to use custom fonts in Tailwind CSS"
good yara you solved my problem thank you
Thank you for this blog! Helped so much when setting up some custom fonts.
Thanks a lot you are awesome!!! Have an amazing day!!!
tHANSK A LOT !!!!!!
Thanks, It helped me !!
Thank you! I searched exactly for “how to use custom font tailwind”, looking for a way to add a locally installed font. I don’t have a global.css file, so I successfully installed the font on my project by inserting a link tag to the local file in my index.html file (it’s a React project).
I think that might be the best for the sake of keeping standards since I had already imported a web font this way, but am not sure it’d be a problem from another perspective.