Tailwind add custom font

How to add a custom font to tailwind

Table of Contents

Choose a font

Fontsource

Bunny.net Fonts (google fonts mirror)

Install font

pnpm add @fontsource/FONT

Add font to your main css file

@import '@fontsource/FONT';
/* OR @import url(https://fonts.bunny.net/css?family=FONT:WEIGHT)*/
@theme {
	--font-NAME: 'FONTNAME', 'sans-serif';
}

How to use

<h1 class="font-NAME">Hello World</h1>