How to use .ttf fonts with Tailwind CSS

#tailwindcss #webdev #tutorial #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 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 @font-face CSS rule which allows us to import our own font in CSS.

@font-face{
    font-family: 'Pixellari'; // Write the name of your custom font.


    // Below you need to give the path of the font, If you have only one format no problem
    // but if you have more then one format, you can add all those, you just need to
    // separate these with commas.
    src: url('Pixellari.woff2') format('woff2'), url('Pixellari.woff') format('woff');
}

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

@import url('./fonts/stylesheet.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.

module.exports = {
    //.... All the initial code
    theme: {
        extend: {
            fontFamily: {
                'pixellari' : ['Pixellari', 'sans-serif'],  // after you font, add some fonts separated by commas to handle fallback.
            }
        }
    }
    //.... All the initial code
}