DEV Community

Itunu Lamina
Itunu Lamina

Posted on • Updated on


Using Custom Fonts In Tailwind CSS

What are custom fonts?

Custom fonts allow you to use a beautiful combination of different fonts on your website to improve typography and user experience.

In this article, I will walk you through how you can conveniently use your favourite fonts in your web applications with tailwindcss.


Before you begin this tutorial you'll need the following:

  • Code Editor installed
  • Tailwindcss set up


If you are getting your fonts from CDN like google fonts or even adobe fonts then font format should really not be your concern.

If you are mostly targeting users with modern browsers, you can use WOFF and WOFF2 formats. These offer the best compression and allow you to deal with fewer files in your code. And if a user’s machine is so old that it doesn’t support either of these formats, it may be better to just serve them a system font as a fallback for performance reasons, anyway.
If you want to expand support as wide as possible, then add EOT and TTF files to the mix.

This tutorial will use the Transfonter, a modern and simple css @font-face generator.

Before you proceed, make sure you have your fonts ready.

remember to enable the add local rule

Setting up your project

Create a new project with your preferred framework. I will be using Next.js

Install tailwindcss

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode

Create your configuration files

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

This will create a minimal tailwind.config.js file at the root of your project and It will also create a
postcss.config.js file that includes tailwindcss and autoprefixer already configured.

Include Tailwind in your CSS

In your globals.css file inside the styles directory at the root of your project. Replace the content with the following:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Installing Your Custom Font

If you are not using fonts from a CDN like google fonts.

Go to, click on the ADD FONTS button to import your already downloaded fonts.

Choose preferred format(s)


Click on the CONVERT button afterwards

Extract the downloaded zip file from Transfonter, Move all the files into the /public/fonts folder in your project directory.

Update your globals.css

There should be a stylesheet.css file in the fonts folder in your public directory of your project

@import url('/fonts/stylesheet.css');

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

If you are using CDN, simply use the import rule like this

@import url(';400&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Finally, extend the fontFamily in the theme in your tailwind.config.js to use the new imported font family, in our case BR Firma,

module.exports = {
    purge: [
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            fontFamily: {
                sans: ['BR Firma', 'sans-serif'],
    variants: {
        extend: {},
    plugins: [],

Enter fullscreen mode Exit fullscreen mode

Voila! 😁 We have our custom fonts loaded

Check out the following resource for in-depth understanding.

Top comments (6)

vhs profile image

It would be wise to additionally incorporate the default font stack provided by Tailwind CSS for the cases where the custom font doesn't load for whater reason or the site/app attempts to use a glyph that isn't provided by your custom font (such as an emoji). This will ensure you have sensible cross-platform fallbacks in place to cover your edge-cases.

isaactait profile image
Isaac Tait

Thank you for publishing this. I was stuck trying to sort out how to import custom google fonts into my GatsbyJS/TailwindCSS project until I came across your article. 🤩💯

promzycodes profile image
Promise The Developer

hi, what if i have more than one custom font to use on a project?

thelamina profile image
Itunu Lamina

You need to import the other fonts as explained too,
but you'd have to update your tailwind config file like this

    fontFamily: {
        sans: ['BR Firma', 'sans-serif'],
        serif: ['New Font', 'serif'],
Enter fullscreen mode Exit fullscreen mode

Add as much fonts as your project requires

newpathdev profile image

Great tutorial
thank you
It should be Voila, viola means a totally different thing (not a good one BTW)

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.