How to use .ttf fonts with Tailwind CSS

If you are a frontend developer, you might have face some problems while searching good and unique fonts. If you want to use some special fonts which are not available in Google fonts, but it is available in .ttf or .woff or any other formats like these. Then I will show you how to use these with Tailwind CSS.

I will show you step by step process for it. I have initialized a blank project on NextJs, So I am going to talk in reference to NextJs folder structure but you can follow the same process for any framework or for vanilla JS project.

Step 1. Create a folder font (you can use any name) inside the styles folder. Step 1. Add the .ttf or .woff fonts inside the font folder. Step 3. Create a new CSS file inside the font folder, I am creating stylesheet.css Step 4. Now use the @font-face CSS rule which allows us to import our own font in CSS.

Step 5. Now you need to import the previous CSS file on you global CSS, in my case I need to import stylesheet.css to my globals.css

Step 6. Now lastly, you need to inform tailwind CSS that you need to extend a font-family, So for this you need add a few lines in tailwind.config.js.

Now you are good to go, you can now use font-pixellari property in your html class or jsx className.

Hope you like this blog, and it adds some value to your skills. Feel free to connect with me on Twitter or LinkedIn.