DEV Community

Cover image for How To Add Custom Fonts In Tailwind
Onur Eren
Onur Eren

Posted on Edited on

How To Add Custom Fonts In Tailwind

#css #tailwindcss #webdev #frontend

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;
Enter fullscreen mode Exit fullscreen mode

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.

google-fonts-guide

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');
Enter fullscreen mode Exit fullscreen mode

Step 3

After that, initalize the font family.



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

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)