What is Custom font integration in Tailwind?

Tailwindmarkup~5 mins

Custom font integration in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Custom fonts make your website look unique and match your style. They help your text stand out and improve user experience.

You want your website to have a special look different from default fonts.

You need to use a brand's specific font to keep consistency.

You want to improve readability with a font that suits your content.

You want to add personality to headings or important text.

You want to use a font that supports different languages or styles.

Syntax

Tailwind

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* Then in Tailwind config (tailwind.config.js): */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        custom: ['MyCustomFont', 'sans-serif'],
      },
    },
  },
};

The @font-face rule loads your font file so browsers can use it.

In Tailwind config, you add your font name under fontFamily to use it with utility classes.

Examples

This example adds the OpenSans font and names it open for Tailwind usage.

Tailwind

@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/OpenSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        open: ['OpenSans', 'sans-serif'],
      },
    },
  },
};

Use the class font-custom in your HTML to apply the custom font.

Tailwind

<p class="font-custom">This text uses the custom font.</p>

You can add multiple font weights by defining multiple @font-face rules with different font-weight.

Tailwind

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        myfont: ['MyFont', 'sans-serif'],
      },
    },
  },
};

Sample Program

This example loads a custom font (Roboto from Google Fonts URL) using @font-face. Then it extends Tailwind's fontFamily with custom. The heading and paragraph use font-custom class to show the font.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Custom Font with Tailwind</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @font-face {
      font-family: 'MyCustomFont';
      src: url('https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxM.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
    }
  </style>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            custom: ['MyCustomFont', 'sans-serif'],
          },
        },
      },
    };
  </script>
</head>
<body class="p-8">
  <h1 class="font-custom text-3xl">Hello with Custom Font!</h1>
  <p class="mt-4 font-custom text-lg">This text uses the custom font loaded with @font-face and Tailwind.</p>
</body>
</html>

OutputSuccess

Important Notes

Make sure your font files are in the correct folder and paths are right.

Use modern font formats like WOFF2 for better browser support and performance.

Test your font on different devices to ensure it looks good everywhere.

Summary

Custom fonts help your site look unique and match your style.

Use @font-face to load fonts and extend Tailwind's fontFamily to use them.

Apply your custom font with Tailwind classes like font-custom.