How to Use Custom Fonts with Tailwind CSS: A Step-by-Step Guide
by SWHabitation
Custom fonts can enhance the appearance and vibe of your website, giving it a distinct and visually captivating touch.
If you're using Tailwind CSS, adding these fonts is a breeze. This comprehensive guide will take you step by step, ensuring that developers of any expertise can easily follow along.
Why Use Custom Fonts?
Fonts are essential in web design as they give personality to your website, improve readability, and evoke certain emotions.
Although Tailwind CSS provides many default fonts, there are times when you may want a more unique option.
Custom fonts can assist you in achieving that special appearance.
Getting Started
Make sure you have a Tailwind CSS project set up before getting into the technical steps.
If you haven't done so yet, you can easily create one by referring to the Tailwind CSS installation guide
Adding Custom Fonts from Google Fonts
Step 1: Choose Your Font
Start by choosing the custom font that best suits your needs.
You can find a variety of free and premium fonts on platforms like Google Fonts, Adobe Fonts, and other font marketplaces.
In this article, we will be using Google Fonts.
Step 2: Import the Font
To find your desired font, visit Google Fonts and make a selection.
For instance, let's go with "Roboto" for this example.
Once you've chosen the font, head over to the "Embed" section where you'll find an HTML link.
Simply copy the `<link>` tag provided, which will look something like this
1
2
3
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">Step 3: Add the Font to Your Project
Now, you can add this link to your HTML file.
Simply open your main HTML file (for example, `index.html`) and insert the link within the `<head>` element.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tailwind Project</title>
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Your content goes here -->
</body>
</html>Step 4: Extend Tailwind Configuration
Once you have imported the font, it's time to instruct Tailwind CSS to utilize it.
Simply open the `tailwind.config.js` file and extend the `theme` section.
1
2
3
4
5
6
7
8
9
10
module.exports = {
theme: {
extend: {
fontFamily: {
roboto: ['Roboto', 'sans-serif'],
},
},
},
plugins: [],
}Step 5: Apply the Font
Now that you have set up the configuration, you are ready to utilize your personalized font in your classes.
For instance, if you want to use the "Roboto" font for all the body text, simply add a class to the `<body>` tag.
1
2
3
4
<body class="font-roboto">
<h1 class="text-3xl font-bold">Welcome to My Tailwind Project</h1>
<p class="text-lg">This is a sample paragraph using the Roboto font.</p>
</body>You can also apply the custom font to specific elements as needed:
1
2
<h1 class="font-roboto text-3xl font-bold">Hello, World!</h1>
<p class="text-lg">This paragraph is using the default font.</p>Adding Custom Fonts Using @import in Your CSS
If you prefer to import fonts directly in your CSS, here’s how to do it.
Once you've chosen the font, head over to the 'Embed' section where you'll find an @import.
Simply copy the `@import` code provided.
Step 1 : Import the Font
Add the `@import` rule at the top of your main CSS file (e.g., `styles.css`)
1
2
3
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
</style>Step 2 : Extend Tailwind Configuration
As before, update the Tailwind configuration:
1
2
3
4
5
6
7
8
9
10
module.exports = {
theme: {
extend: {
fontFamily: {
roboto: ['Roboto', 'sans-serif'],
},
},
},
plugins: [],
}
Step3 : Apply the Font
Use the custom font in your HTML:
1
2
3
4
<body class="font-roboto">
<h1 class="text-3xl font-bold">Welcome to My Tailwind Project with Imported Font</h1>
<p class="text-lg">This is a sample paragraph using the Roboto font.</p>
</body>Adding Custom Fonts from the Public Folder
Here's a simple guide on how to use custom font files that are stored locally in your project's public folder.
Step 1: Store the Font Files
Place your font files (e.g., `.woff`, `.woff2`, `.ttf`) in the `public/fonts` directory. Your structure should look like this:
1
2
3
public/
└── fonts/
└── MyCustomFont.woff2Step 2: Update the CSS
Define the `@font-face` rule in your CSS file (e.g., `styles.css`)
1
2
3
4
5
6
7
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/MyCustomFont.woff2') format('woff2'),
url('/fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}Step 3 : Extend Tailwind Configuration
Update the Tailwind configuration to include your custom font:
1
2
3
4
5
6
7
8
9
10
module.exports = {
theme: {
extend: {
fontFamily: {
custom: ['MyCustomFont', 'sans-serif'],
},
},
},
plugins: [],
}Step 4 : Apply the Custom Font
1
2
3
4
<body class="font-custom">
<h1 class="text-3xl font-bold">Welcome to My Tailwind Project with Custom Font</h1>
<p class="text-lg">This is a sample paragraph using MyCustomFont.</p>
</body>Conclusion
That's all! Whether you utilized an HTML link, local files, or the `@import` rule, you have effectively incorporated a personalized font into your Tailwind CSS project. By adhering to these instructions, you can elevate the typography of your website and craft a genuinely distinctive design. The seamless integration of custom fonts is made possible by the flexibility and utility-first approach of Tailwind CSS.
