Mar 05,2022How 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.
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 . 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:ital@0;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: [
]
}
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 fontFirst 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 TailwindIn 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.
Leave A Replay