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