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.
Building with web fonts
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 this small project on GitHub. Feel free to port it to your frontend framework of choice.
There are different ways to add custom fonts in Tailwind applications, but we’ll stick to the simplest path. Here’s how to add web fonts to a Tailwind project via the HTML <head> tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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:[email protected];1&display=swap"
rel="stylesheet"
/>
<link href="/src/output.css" rel="stylesheet" />
</head>
<body>
<section class="text-gray-600 body-font font-poppins">
<div
class="container mx-auto flex px-5 py-24 items-center justify-center flex-col"
>
<div class="text-center lg:w-2/3 w-full">
<h1
class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
>
Microdosing synth tattooed vexillologist
</h1>
</div>
</div>
</section>
</body>
</html>
In the snippet above, we added the Poppins web font to the project. However, if we look at the output on the browser below, we won’t see the font take effect yet.
It appears our project is still using the default Tailwind font. Let’s tell Tailwind to use the Poppins font we added instead.
Open your tailwind.config.js file and update the configuration to extend the Poppins font we just added:
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'poppins': ['Poppins', 'sans-serif']
},
},
},
variants: {
},
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’ll exist alongside the Tailwind default font classes. As a result, it won’t take effect yet until we use the font-poppins class in our markup like this:
<!DOCTYPE html>
<html>
<head>
<!-- some code -->
</head>
<body>
<section class="text-gray-600 body-font font-poppins">
<div
class="container mx-auto flex px-5 py-24 items-center justify-center flex-col"
>
<div class="text-center lg:w-2/3 w-full">
<h1
class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
>
Microdosing synth tattooed vexillologist
</h1>
</div>
</div>
</section>
</body>
</html>
In the above snippet, we added the font-poppins utility class to the <section> tag of our HTML file. 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.
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 exactly 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.
Install the font
First things first, we need to find the font we want and install it. Usually, we can find them just by googling the name of the font. Then, 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.
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:
// globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@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 into our Tailwind project. Next, let’s use it. Open the Tailwind config file and update it with the snippet below:
// tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
poppins: ["Poppins", "sans-serif"],
adelia: ["ADELIA", "cursive"],
},
},
},
plugins: [],
};
Just like we did with the Poppins font, we are extending Tailwind’s fontFamily utility class to include the Adelia font we just added to the project. This will consequently expose a font-adelia class for us to use across the project wherever we need to use the font. To see this in action, update the HTML to add the font-adelia class to the <section> tag:
<!DOCTYPE html>
<html>
<head>
<!-- some code -->
</head>
<body>
<section class="text-gray-600 body-font font-adelia">
<div
class="container mx-auto flex px-5 py-24 items-center justify-center flex-col"
>
<div class="text-center lg:w-2/3 w-full">
<h1
class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
>
Microdosing synth tattooed vexillologist
</h1>
</div>
</div>
</section>
</body>
</html>
And now we should see the updated font in the UI of our project like this:
And that’s it! We are now using a locally installed font in the project.
Remove 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!
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 or site. 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.
