Blog

How to Use Custom Fonts with Tailwind CSS: A Step-by-Step Guide

by SWHabitation
Image
Jun 08, 2024

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?

Image

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

Copy Code
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.

Copy Code
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.

Copy Code
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.

Copy Code
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:

Copy Code
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`)

Copy Code
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:

Copy Code
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:

Copy Code
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:

Copy Code
1 2 3 public/ └── fonts/ └── MyCustomFont.woff2

Step 2: Update the CSS

Define the `@font-face` rule in your CSS file (e.g., `styles.css`)

Copy Code
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:

Copy Code
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

Copy Code
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>

What is robots.txt file ? How to add into your Next.js app ?

Read more

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.


SWHabitation
Founder & CEO
Preview PDF