Tailwind CSS Custom Fonts for Headings

Tailwind CSS offers a powerful and flexible way to style your websites, but sometimes you might want to go a step further and apply a specific font to all your site's headings, such as h1 to h6, while keeping the default font for the rest of your content. In this post, we'll guide you through the process of achieving this with Tailwind CSS, ensuring that your headings stand out with your desired custom font.

Defining Your Custom Font

First, let's ensure that your custom font is properly defined in your Tailwind CSS configuration. This involves extending the fontFamily theme within your tailwind.config.js file. Here's how you can add your custom font, which we'll refer to as font-garnett for this example:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        garnett: ['Garnett', 'sans-serif'], // 'Garnett' is the font name, with 'sans-serif' as a fallback
      },
    },
  },
}

This code snippet tells Tailwind CSS to recognize font-garnett as a valid font utility class, which can then be applied to elements in your project.

Applying the Custom Font Globally to Headings

With your custom font configured, the next step is to apply it globally to all headings on your site. You can achieve this by adding custom CSS rules that target all heading elements (h1 through h6) and apply the font-garnett utility class. Add the following CSS to your global stylesheet:

h1, h2, h3, h4, h5, h6 {
  @apply font-garnett;
}

By doing this, you're ensuring that all heading elements across your site will use the font-garnett font, giving your headings a consistent and unique style that sets them apart from the rest of your content.

Maintaining the Default Font for Other Content

For the rest of your content, there's no need for any additional configuration. Simply use Tailwind CSS's utility classes as you normally would. Your headings will automatically adopt the font-garnett style due to the global CSS rules you've set, while other elements will retain the default font unless specified otherwise.

This approach offers a neat and efficient way to customize the typography of your headings across your entire site, enhancing the visual hierarchy and overall aesthetic of your content. Remember, the key to effective web design lies in consistency and attention to detail, and with Tailwind CSS, you have all the tools at your disposal to achieve just that.

Embrace the power of custom fonts in your Tailwind CSS projects and see the difference it can make in distinguishing your site's headings from the rest of your content, creating a more engaging and visually appealing experience for your users.