Can you change the base font-family in Tailwind config?
In this article, we will see how to change the base font family in the tailwind config. The base font-family in the Tailwind config can be customized by modifying the theme section in your configuration file ( tailwind.config.js). For this, we simply need to open your tailwind.config.js file, and then locate the theme section and add or modify the fontFamily key. The following is the default Tailwind font-family config:
theme: { fontFamily: { sans: [ 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', ], serif: ['serif'], mono: ['monospace'], }, },
Changing the font-family in the Tailwind config
The following techniques can be utilized to modify the font-family in the Tailwind config
Changing base font-family
To change the base font-family for sans-serif fonts, you would simply override the sans-font stack. The following is the Tailwind config where the base font-family is changed to Roboto.
theme: { fontFamily: { sans: ['Roboto', sans - serif], }, },
Adding a new font family
You can also add new font families or remove existing font families. The following Tailwind config displays how you can add a new font family for monospace fonts called Courier New.
theme: { fontFamily: { sans: [ 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', ], serif: ['serif'], mono: ['Courier New', 'monospace'], // Added new font family 'Courier New' }, },
Removing font family
To remove the serif font family, we would just need to remove the object until the previous comma.
theme: { fontFamily: { sans: [ 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', ], // Remove serif font family }, },
Note: Once you have made your changes to the fontFamily object, you will need to recompile your CSS files to see the changes take effect.
Example 1: In this example, we will learn an example with the default font style of tailwind.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Changing Base Font-family</ title > < script src = "https://cdn.tailwindcss.com" ></ script > < script > tailwind.config = { theme: { fontFamily: { sans: [ 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', ], serif: ['serif'], mono: ['monospace'], }, }, } </ script > </ head > < body > < h1 class="text-3xl font-bold text-green-400 text-center text-clifford"> w3wiki </ h1 > </ body > </ html > |
Output:
Example 2: In this example, we will learn an example with a new font style of Tailwind CSS
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title > Changing the Default Tailwind CSS Base font-familiy </ title > < script src = "https://cdn.tailwindcss.com" > </ script > < script > tailwind.config = { theme: { fontFamily: { sans: [ 'Noto Color Emoji', ], serif: ['serif'], mono: ['monospace'], }, }, } </ script > </ head > < body > < h1 class="text-3xl font-bold text-green-400 text-center text-clifford"> w3wiki </ h1 > </ body > </ html > |
Output: