How to use custom fonts in tailwindcss
Fazail Alam Sun Jun 26 2022

How to use custom fonts in tailwindcss

Let’s start by adding link of font family in our head tag.

<head>
    ...
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
        rel="stylesheet"
    />
    ...
</head>
<body>
    <h1>Custom Font</h1>
</body>

In this example, we are using roboto font family. But if you check right now on the browser, you will see that it didn’t effect on our texts.

Now open tailwind.config.js file and extend theme with fontFamily. Next, give a key name you want to use and pass font family name as value in array.

theme: {
    extend: {
		fontFamily: {
			roboto: ["Roboto"],
		},
	},
},

Now to use this font family in your project, just add class name roboto prefix with font in your h1 tag .

<h1 class="font-roboto">Custom Font</h1>

Adding default fontFamily in your project

In your tailwind.config.js file, require tailwindcss/defaultTheme and pass it as second value in array

const defaultTheme = require("tailwindcss/defaultTheme");
...
theme: {
    extend: {
		fontFamily: {
			roboto: ["Roboto", ...defaultTheme.fontFamily.sans],
		},
	},
},

This will set default font-family in your project.

Want frameworks news and updates?

Sign up for our newsletter to stay up to date.