Can you change the base font-family in Tailwind config?

Last Updated : 26 Dec, 2023

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"> 
        GeeksforGeeks 
    </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"> 
        GeeksforGeeks 
    </h1> 
</body> 
  
</html>