Custom font integration in Tailwind

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>

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.

Practice

1. What is the main purpose of using @font-face in Tailwind CSS when integrating a custom font?

easy

A. To load and define a custom font so it can be used in your styles

B. To create animations for text using the font

C. To automatically download fonts from Google Fonts

D. To change the font size of text elements

Solution

1. Step 1: Understand the role of @font-face

   @font-face is a CSS rule that lets you load a custom font file into your website.

2. Step 2: Connect @font-face to Tailwind usage

   After loading the font with @font-face, you extend Tailwind's fontFamily to use that font in your classes.

3. Final Answer:

   To load and define a custom font so it can be used in your styles -> Option A

4. Quick Check:

   @font-face loads fonts = D [OK]

Hint: Remember: @font-face loads fonts, not styles [OK]

Common Mistakes:

• Thinking @font-face changes font size
• Confusing font loading with animations
• Assuming it downloads fonts automatically

2. Which of the following is the correct way to extend Tailwind's fontFamily in tailwind.config.js to add a custom font named 'MyFont'?

easy

A. fontFamily: { myfont: 'MyFont' }

B. fontFamily: { 'MyFont': ['custom', 'sans-serif'] }

C. fontFamily: { custom: ['MyFont', 'sans-serif'] }

D. fontFamily: { custom: 'MyFont', fallback: 'sans-serif' }

Solution

1. Step 1: Recall Tailwind fontFamily syntax

   Tailwind expects font families as arrays with font names and fallbacks, e.g., fontFamily: { key: ['FontName', 'fallback'] }.

2. Step 2: Match correct syntax

   fontFamily: { custom: ['MyFont', 'sans-serif'] } correctly uses custom as key and an array with 'MyFont' and 'sans-serif'. Others misuse keys or values.

3. Final Answer:

   fontFamily: { custom: ['MyFont', 'sans-serif'] } -> Option C

4. Quick Check:

   fontFamily uses arrays for fonts = C [OK]

Hint: Use arrays for font names and fallbacks in config [OK]

Common Mistakes:

• Using strings instead of arrays for fontFamily
• Swapping keys and values
• Missing fallback fonts

3. Given this Tailwind config extension:

fontFamily: { custom: ['MyFont', 'sans-serif'] }

and this HTML:

<p class="font-custom">Hello</p>

What font will the paragraph use if 'MyFont' is loaded correctly?

medium

A. No font, text will be invisible

B. The browser default font

C. 'sans-serif' fallback font only

D. 'MyFont' custom font

Solution

1. Step 1: Understand class usage

   The class font-custom applies the font family named 'custom' from Tailwind config.

2. Step 2: Check font loading

   If 'MyFont' is loaded correctly via @font-face, it will be used first, with 'sans-serif' as fallback.

3. Final Answer:

   'MyFont' custom font -> Option D

4. Quick Check:

   font-custom uses 'MyFont' if loaded = A [OK]

Hint: font-custom uses your custom font if loaded properly [OK]

Common Mistakes:

• Assuming fallback font is always used
• Confusing class name with default fonts
• Thinking text disappears without font

4. You added this to your CSS:

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

But your text with font-custom class still shows default font. What is the likely mistake?

medium

A. You used the wrong font file format

B. You forgot to extend fontFamily in tailwind.config.js

C. You applied the wrong Tailwind class name

D. You did not include the font file in your HTML

Solution

1. Step 1: Check font-face usage

   The font is loaded with @font-face, so the font file is available.

2. Step 2: Verify Tailwind config

   Without extending fontFamily in tailwind.config.js, the class font-custom won't apply the new font.

3. Final Answer:

   You forgot to extend fontFamily in tailwind.config.js -> Option B

4. Quick Check:

   fontFamily extension missing = B [OK]

Hint: Always extend fontFamily to use custom fonts in Tailwind [OK]

Common Mistakes:

• Not extending fontFamily in config
• Using wrong class names
• Forgetting to rebuild Tailwind after config change

5. You want to use two custom fonts, 'MyFontBold' and 'MyFontLight', in Tailwind. How should you configure tailwind.config.js and your CSS to use font-boldcustom and font-lightcustom classes for them?

hard

A. Define two @font-face rules with different font-family names and extend fontFamily with keys 'boldcustom' and 'lightcustom' pointing to those fonts

B. Use one @font-face with both fonts and extend fontFamily with a single key

C. Only extend fontFamily once and use CSS font-weight to switch fonts

D. Add both fonts in one @font-face and use font-custom class for both

Solution

1. Step 1: Define separate @font-face rules

   Each font variant needs its own @font-face with unique font-family names like 'MyFontBold' and 'MyFontLight'.

2. Step 2: Extend Tailwind's fontFamily

   In tailwind.config.js, add keys 'boldcustom' and 'lightcustom' pointing to these font-family names so you can use font-boldcustom and font-lightcustom classes.

3. Final Answer:

   Define two @font-face rules and extend fontFamily with 'boldcustom' and 'lightcustom' -> Option A

4. Quick Check:

   Separate font-faces + fontFamily keys = A [OK]

Hint: Use separate font-family names and keys for each font variant [OK]

Common Mistakes:

• Trying to combine fonts in one @font-face
• Using CSS font-weight instead of separate font-family
• Not extending fontFamily for each font variant