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;