How To Add Custom Fonts In Tailwind

If you have an app that is configured to use Tailwind, you will have an index.css file that contains these 3 lines:

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

Here are the steps you can follow to set up a custom font in your project:

Step 1

Go to https://fonts.google.com/ and search for the font you want to use.

Select the font styles you want to use and copy the @import line.

Step 2

Add the @import line you copied to your index.css file where you configure Tailwind.

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

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');

Step 3

After that, initalize the font family.

@layer base {
  html {
    font-family: Montserrat, system-ui sans-serif;
  }
}

Your final CSS will look like this:

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

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');

@layer base {
  html {
    font-family: Montserrat, system-ui sans-serif;
  }
}

Now your default font is set up as Montserrat, or whatever font you have selected.

Thank you for reading! 🙏

You can follow me on Twitter