Posts Learn Components Snippets Categories Tags Tools About
/

How to Override Fonts Configuration in TailwindCSS

Get to know how to override the default fonts of TailwindCSS to add your custom fonts

Created on Aug 15, 2021

1317 views

To override and add your custom TailwindCSS font, you can update the default "tailwind.config.js" file. From within the configuration, you will have to pull the default fonts provided by TailwindCSS and you can then put them alongside the font you are overriding as the fallback.
tailwind.config.js

Import Existing Configuration
You can import the default location by requiring the original location of the TailwindCSS configuration. The default configuration contains all of the default settings from fonts, colors, spacing and etc.
const defaultTheme = require('tailwindcss/defaultTheme');

Full Code Example
Once you have already import it, you can override it by extending the default "fontFamily" settings and provide in the font type name that you want to refer to. You can have a look at the example below for the full code.
// tailwind.config.js

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

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Lato',
          ...defaultTheme.fontFamily.sans,
        ]
      }
    }
  }
}

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

)