How To Use Custom (Local) Fonts with Tailwind CSS

Using custom fonts locally is quite normal in web development. The tailwind documentation does not quite cover that part though. This is a simple guide on how to do that.

Adding the font

First of all, we have to add the font as a @font-face in our CSS.

In my case, I wanted to add the Aribau font to a project I am working on.

@font-face {
	font-family: "aribau";
	src: url("/fonts/Aribau-Grotesk-Regular.otf");
	font-weight: normal;
	font-style: normal;
}

The font is located in my static folder.

To reference the font in our Tailwind, we need to add the following snippet to our tailwind.config.cjs.

module.exports = {
	content: ["./src/**/*.{html,js,svelte,ts}"],
	theme: {
		extend: {
			fontFamily: {
				aribau: ["aribau"],
			},
		},
	},
	plugins: [],
};

Now we can simply change to that font by the normal tailwind syntax for fonts.

<div class="font-aribau">Hello</div>

Adding font weight and style

It’s also quite simple to add font weight and style to be able to use those attributes as well in Tailwind. All we have to do is change the font-weight and font-style attributes.

@font-face {
	font-family: "aribau";
	src: url("/fonts/Aribau-Grotesk-Bold.otf");
	font-weight: bold;
	font-style: normal;
}

And now we can simply add the bold version like this:

<div class="font-aribau font-bold">Hello</div>

Same goes for the style of the font.

You can also use numeric values instead of normal or bold as a font-weight.

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;// normal
font-weight: 500;
font-weight: 600;
font-weight: 700;// bold
font-weight: 800;
font-weight: 900;