Ben Borgers / Posts /

How to customize font in Tailwind CSS

March 30, 2021 by @benborgers

Tailwind CSS comes with default .font-sans, .font-serif, and .font-mono classes. But sometimes, you want to add your own font family, or customize one of the existing classes.

You can do this with your tailwind.config.js file using the extend functionality.

// tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    variants: {
        extend: {
            fontFamily: {
                sans: ['"DM Sans"', ...defaultTheme.fontFamily.sans],
                cursive: ['cursive']
            }
        }
    }
}

The sans line overwrites Tailwind's .font-sans class with your own font at the front, but then falls back to the Tailwind stack if your custom font doesn't load. The cursive line creates a new class called .font-cursive that has that font stack.

Now, next time you rebuild your Tailwind CSS file, those changes will be made to the font classes.

Notice that font names that contain a space must have additional quotes around them.

A quick favor: was anything I wrote incorrect or misspelled, or do you still have questions? Please use this form to let me know or ask for help!

Loading...