If you are a frontend developer, you might face some problems while searching for 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 the 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 to 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
}
Now you are good to go, you can now use font-pixellari
property in your html class
or jsx className
.
Thanks for your time
Hope you like this blog, and it adds some value to your skills. Feel free to connect with me on Twitter or LinkedIn.