DEV Community

Cover image for How to Use Custom Fonts with Tailwind CSS: A Step-by-Step Guide
swhabitation
swhabitation

Posted on • Originally published at swhabitation.com

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

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

<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">
Enter fullscreen mode Exit fullscreen mode

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.

<!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>
Enter fullscreen mode Exit fullscreen mode

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.

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        roboto: ['Roboto', 'sans-serif'],
      },
    },
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

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.

<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>
Enter fullscreen mode Exit fullscreen mode

You can also apply the custom font to specific elements as needed:

<h1 class="font-roboto text-3xl font-bold">Hello, World!</h1>
<p class="text-lg">This paragraph is using the default font.</p>
Enter fullscreen mode Exit fullscreen mode

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)

<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>
Enter fullscreen mode Exit fullscreen mode

Step 2 : Extend Tailwind Configuration
As before, update the Tailwind configuration:

module.exports = {
     theme: {
       extend: {
         fontFamily: {
           roboto: ['Roboto', 'sans-serif'],
         },
       },
     },
     plugins: [],
   }
Enter fullscreen mode Exit fullscreen mode

Step3 : Apply the Font
Use the custom font in your HTML:

<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>
Enter fullscreen mode Exit fullscreen mode

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:

 public/
     └── fonts/
         └── MyCustomFont.woff2
Enter fullscreen mode Exit fullscreen mode

Step 2: Update the CSS

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

@font-face {
     font-family: 'MyCustomFont';
     src: url('/fonts/MyCustomFont.woff2') format('woff2'),
          url('/fonts/MyCustomFont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
   }
Enter fullscreen mode Exit fullscreen mode

Step 3 : Extend Tailwind Configuration

Update the Tailwind configuration to include your custom font:

  module.exports = {
     theme: {
       extend: {
         fontFamily: {
           custom: ['MyCustomFont', 'sans-serif'],
         },
       },
     },
     plugins: [],
   }
Enter fullscreen mode Exit fullscreen mode

Step 4 : Apply the Custom Font

  <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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)