Fontsource fonts in TailwindCSS

Simple way to do it is to just install the font, we will install Montserrat | Install | Fontsource for our demo:

pnpm install @fontsource-variable/montserrat

Put this at the top of your app.css file

@import '@fontsource-variable/montserrat';
/* Other fonts go here too */
 
@tailwind base;
@tailwind components;
@tailwind utilities;

Add this to the extends.fontFamily of your tailwind.config.js file

theme: {
	extends: {
			fontFamily: {
				sans: [...fontFamily.sans],
				head: 'Inknut Antiqua, serif',
				kicker: 'Montserrat Variable, sans-serif'
		}
	}
}

That’s all, now use the utility class: font-kicker