How to customize your fonts in Tailwind

Tailwind comes with 3 default font classes, these are .font-serif, .font-sans and .font-mono. Though sometimes you'll need to add your own custom font families, or customize the existing font classes.

Within the tailwind's config file (tailwind.config.js) you'll be able to do this by using the extend functionality.

// Tailwind Config file

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: ["Roboto", "sans-serif"],
                serif: ["freight-display-pro"],
                mono: ["Roboto", "sans-serif"]
            }
        }
    }
};

The sans, serif and mono lines overwrites Tailwind's default .font-(sans,serif,mono) class with your own selected font but then falls back to the second parameter's font if your custom font doesn't load.

If you want to create your custom font class, add a new line and Tailwind will create a new class that has that font stack.

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: ["Roboto", "sans-serif"],
                serif: ["freight-display-pro"],
                mono: ["Roboto", "sans-serif"],
                custom: ["custom", "sans-serif"]
            }
        }
    }
};

The custom line will create a new class called .font-custom that loads the font you've added.

When you rebuild your Tailwind file, the changes will then reflect.