How to add Custom Font to Tailwind - For Web and Locally Downloaded Fonts

Introduction

When creating a web application, including your preferred font is like icing on the cake. Fonts enhance the text, make the website more appealing, and provide a better user experience. Designers and developers love and hate some fonts, and using the default font might limit their creativity. Adding custom fonts gives developers the freedom to add an external font to their application.

Prerequisites

In this tutorial, I strongly recommend that you have basic knowledge of Tailwind CSS.

I assume the reader is familiar with Tailwind CSS and how to integrate Tailwind into an application. If you are new to Tailwind, you can check the official documentation for instructions on how to install it.

What is a Custom Font?

Custom fonts are fonts that are not available for use by default. Custom fonts do not exist in your system and are not readily available when needed. They include fonts you purchase, get online, create yourself or specially branded fonts that your company uses. A popular example of a custom font is the Google font.

Adding Custom Fonts to Your Project

When you install Tailwind on your project, it adds an additional file named tailwind.config. Inside the tailwind.config file is where we add custom fonts, colours, grid layout templates, font sizes, etc. To add custom fonts, place the custom properties between the extend object. See below how the tailwind.config file looks:

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: { },
    },
  },
  plugins: [],
};

To add a custom font, I will use Google Fonts. Go to the google font website, click on Select Styles, then select your preferred font. For this tutorial, I will use this Rubik font. See the pictorial representation of google-font website below, with circled numbers as a guide:

To attach the Google link to your HTML file, take the following steps:

Copy the link from Google.
Go to the index.html file.
Find the head tag and paste the link from google Fonts inside.

<!-- index.html file -->

<!DOCTYPE html>
<html lang="en">
  <!-- the heade tag -->
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-        
    react-app" />
    <!-- google link -->
    <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=Abril+Fatface&family=Mulish:wght@200;300;400;500;600;700;800;900;1    000&family=Rubik:wght@400;500&display=swap" rel="stylesheet">
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Using Custom Fonts

After pasting Rubik fonts inside the index.html file, the Rubik font should be available in your project, but you can't use it yet.

To use it:

Go to tailwind.config file.
Add the fontFamily inside the extend object.

Inside the font family, I will give the font a name, in this case, the name is 'rub'. It can have any name. Open a bracket, add the font name ("Rubik"), and a backup font.

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
      },
    },
  },
  plugins: [],
};

Tailwind recognizes Rubik's font, but I have not put it to use. Go to the file or component you want to use the font on and add Rubik font to its class=''/className='' attributes. To apply the custom font to your project, use rub not Rubik. See the example below:

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    <div className='flex justify-center'>
        <div>
            <!-- without custom font -->
            <h1>Default Font</h1>
            <p>Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.</p>
        </div>
        <div>
            <!-- with custom font -->
            <h1 className='font-rub'>Custom Font(Rubik Font)</h1>
            <p className='font-rub'>Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.</pv>
        </div>
    </div>
  )
}

export default CustomFonts

Using Locally Downloaded Fonts

To use fonts downloaded locally, I will pick a random website. You can try any website of your choice. Go to the dafont website, search for a font in the search bar, and then download it to your local computer. See the pictorial representation of dafont website below, with circled numbers as a guide:

Extract the zip file (I use WinRAR to extract), copy the extracted file, and paste it into a folder in your project. See the example below:

The next step is to navigate to index.css file and insert @font-face to bring the custom font into the project. I will use ADELIA for the font family and src: to specify where the font is available.

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'ADELIA';
    src: url('./fonts/ADELIA.ttf');
}

To integrate the Rubik font, navigate to the tailwind.config file and take the following steps:

Add a custom utility class name.
Open a bracket
Insert 'ADELIA', and 'cursive' as a backup font.

Here is an example:

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
        'adelia': ['ADELIA', 'cursive']
      },
    },
  },
  plugins: [],
};

We can now use the font in our project:

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    <div className='flex justify-center'>
        <div>
            <!-- without custom font -->
            <h1>Default font</h1>
            <p>Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.</p>
        </div>
        <div>
            <!-- with custom font -->
            <h1 className='font-adelia'>Custom Font(Rubik Font)</h1>
            <p className='font-adelia'>Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.</pv>
        </div>
    </div>
  )
}

export default CustomFonts

Conclusion

You can use the custom font in any component or file. There are no limitations to a specific file or component; you can use it in multiple components or files throughout your project. Also, you can add more than one custom font to the config file. I hope the article was helpful. Like, comment, and share so others can learn. Gracias.

Dev Emeka