# How to change Tailwind’s base text size and font family

## Two simple ways to set the default font styles in Tailwind CSS

Irvin Zhan

• August 1, 2024

Tailwind’s type scale scales based on your base text size. To override Tailwind’s default text size and font-family globally, you have two options.

[**1. Add to global CSS (recommended)**](/content/blog/how-to-change-tailwind-base-text-size-and-font-family#1-add-to-global-css-recommended/index.html)

Add the following to wherever you keep global styles. This can be where you import Tailwind:

```
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  font-size: 10px;
  font-family: "Inter", system-ui, sans-serif;
}
```

[**2. Add it to your tailwind.config.js**](/content/blog/how-to-change-tailwind-base-text-size-and-font-family#2-add-it-to-your-tailwindconfigjs/index.html)

To add the global style to your `tailwind.config.js`, you can use a Tailwind plugin.

```
/** @type {import('tailwindcss').Config} */

const plugin = require("tailwindcss/plugin")

module.exports = {
  plugins: [
    plugin(({ addUtilities }) => {
      addUtilities({
        html: {
          fontSize: "10px",
          fontFamily: '"Inter", system-ui, sans-serif',
        },
      })
    }),
  ],
}
```

If you are changing Tailwind’s default font styles, you may also want to [create your own type scale](/content/blog/creating-a-type-scale-in-tailwind-css/index.html).