How to Add New Local Fonts from File in TailwindCSS

There couple of steps you have to do if you want to add new custom fonts in TailwindCSS. Adding Google fonts in TailwindCSS is not that hard, but if you have a custom font file, there is some extra stuff you need to consider.

Step 1: Downloading Custom Fonts File

If you can’t find your desired fonts in google fonts library, luckily, there are many other websites that let you download free fonts. In this example, the fonts used are available for free on dafonts.

Step 2: Add Fonts in TailwindCSS Input File

As all the TailwindCSS classes are generated from what you place in the input file for TailwindCSS. So, you have to add the new fonts in the input file with @font-face the property.

You need to also make sure that the output file where all the generated CSS will be placed, has the access to fonts you are using. In the example, the input and output file is in the same directory so both files have access to the fonts used.

custom fonts in tailwindcss


Check the example below to add new custom fonts from the file. If you have fonts with ttf format, you need to specify format('truetype');. You can read more about @font-face it on css-tricks.

Step 3: Add your fonts in TailwindCSS config file tailwind.config.js

The next step is to add a name for your fonts in the tailwind config file. You can choose any name you want but make sure the value matches the font-family value you specified in the tailwind input file. The following code snippet extends the font family and adds new custom fonts.

Step 4: Use your custom fonts in HTML

You have successfully added newly downloaded custom fonts from a file in TailwindCSS. Now, all you need to do is use these new fonts in HTML. You can use the class name with the font name you specified in the tailwind config file. Check the following code to see how those fonts can be used.

Working Code & Demo Link

Here is the Github Repository containing all the steps we did above. You can download the code and see how it works. If you want to check the working example, here is Demo Link for you to verify.


You can add your desired fonts in TailwindCSS. If the fonts you are willing to use are available on the google fonts library, you can add google fonts, but if you have a custom file for fonts, you can have to do a couple of more steps to use them in TailwindCSS.

Latest articles

Leave a reply

Please enter your comment!
Please enter your name here

Related articles