Skip to content

How to Use Custom Fonts in Tailwind CSS

CSS/

If you want to change the font in Tailwind CSS there are 2 things you need to do.

You have to import the font first into your project. Then, you need to configure Tailwind CSS to use that font.

Let’s jump straight to it.

Step 1 — Importing Font

A common way of importing fonts into your project is using Google Fonts. You pick a font and copy the given code snippet.

Then, add the code to your project and Google will do the rest.

<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=Open+Sans&display=swap" rel="stylesheet">

In this case, the last link is a stylesheet that imports the font in the right format for your user.

Otherwise, you can add the required CSS to your own stylesheet if you have the font files.

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

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    url('/fonts/open-sans-regular.woff2') format('woff2'),
    url('/fonts/open-sans-regular.woff') format('woff');
}

I have written an article about importing font files in CSS if you need more details.

Step 2 — Updating Tailwind CSS Theme

After adding the font you want to use to your project, all that’s left is to configure Tailwind CSS to use it.

Tailwind CSS comes with 3 font style classes available out of the box — font-sans, font-serif and font-mono.

By default, Tailwind CSS uses the sans style for everything, which is equivalent to font-sans class.

To override the default fonts in Tailwind CSS you can update the theme inside the tailwind.config.js config file.

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

If you want to use a serif font instead, it doesn’t make sense to override the sans property in theme.

You can override serif instead.

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        serif: ['Merriweather', 'serif'],
      },
    },
  },
};

And use the serif font style by applying the font-serif class.

<body class="font-serif">

Or, apply it as the base font in CSS.

@layer base {
  html {
    @apply font-serif;
  }
}

You can also use custom properties if you want more control over the class names.

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        body: ['Open Sans', 'sans-serif'],
        heading: ['Merriweather', 'serif'],
      },
    },
  },
};

This way you can use two separate fonts, for example, one as the base font and one for headings.

<body class="font-body">
  <h1 class="font-heading"></h1>
</body>

Tailwind CSS comes with its own list of selected fallback fonts in case your user can’t load the main font. If you want to keep using these fallbacks in your theme, include them from the default theme.

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        body: ['Open Sans', ...defaultTheme.fontFamily.sans],
        heading: ['Merriweather', ...defaultTheme.fontFamily.serif],
      },
    },
  },
};

Alternatively, you can bypass the theme completely and control the font with CSS.

@layer base {
  html {
    font-family: 'Open Sans', system-ui, sans-serif;
  }
}