Let's say you wanted to get wild and make all headings on your site use the Festive font. Right now they're kind of boring.

Page with default font

Get the Font Code

The first thing is to grab the code necessary to use the font. With Google, you can select a family and then retrieve the import code.

Google Fonts import code

If you're working with a font that is not hosted somewhere like Google or Adobe, you'll have to add the font files to your repo locally and then add the appropriate `font-face` styles instead of importing them, as shown below.

Add Code to CSS File

Next, add the fonts to your src/css/main.css file.

@import url('https://fonts.googleapis.com/css2?family=Festive&display=swap');

Add font code

Adjust Tailwind Config

You can override Tailwind configuration, but we recommend extending the font families to have more control. Overriding may make more sense depending on your scenario.

In this case, let's add a festive variation to fonts.

module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        festive: ['"Festive"', 'sans-serif']
      }
      // ...
    }
  }
}

Add Styles

Now you have the font-festive utility class available to use. You can apply this to all headings in your project by adjusting styles back in the src/css/main.css file.

@layer components {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-festive;
  }
}

And it should take effect immediately!

Page with custom font