Tailwindcss is a great css utility tool that can make your website design even faster. Changing the font of your site can be a key features for it to get your own style. However when using external fonts in tailwind, it does requires a bit more setup. For this post I'll assume you have tailwind already setup in your project.

Finding a font

First let's find a font. You can use any site you want but for this post I used Google fonts. You can browse around and find whathever font you want.

Importing the font

In your project's global css file, you'll have to import the font like such:

Note that I am using Lato as my desired font.

Extending your theme

Next we have to extend the theme used in your tailwind config.

Final remarks

This is one of the approaches that you can use to change the font. There are certainly other ways to achieve the same results. Nonetheless, using other fonts can give the site its own unique brand.