Posts Learn Components Snippets Categories Tags 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

45 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,
        ]
      }
    }
  }
}

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More