How to add custom fonts in Tailwind CSS- [Locally Hosted Custom Fonts]

If you have started using tailwind css then you might have seen some default fonts used for headings and paragraphs. I think everybody (including me) want to have custom fonts as per the need of the site. In this article, I'll explain the way to use custom fonts in tailwind css.

One more things, I'm not going to any cdn based fonts here. We are going to host fonts locally then we'll add them into Tailwind's default theme.

Let's get started.

Step by step guide to add custom fonts in Tailwind CSS:

Step 1: Create a font folder in your public directory. Add font formats in their as shown in the picture below:

Step 2: Add '@font-face' in the input.css file or whatever the filename you have given to tailwind base, utility classes.

I have used the recommeded method from tailwind and created

• src folder
• input.css

/*input.css file*/
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Lora";
  src: local("Lora"), url("/fonts/Lora-Bold.woff2") format("woff2");
}

Step 3: Now let's go to our final step. Here we configure our font with tailwind. To do that we have to extend default tailwind theme functionality.

• "extend" theme object
• Add font in "fontFamily" object

module.exports = {
  content: [
    "*.html"
  ],
  theme: {
    extend: {
      fontFamily: {
        'Lora': ['Lora']
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
};

Final Words: If you find this article useful, signup for the mailing list. We'll publishing more developer friendly article on this blog.