January 5, 2023

How to Setup Local Font Files in TailwindCSS

Justin Golden

Length: Short

Level: ✓ Beginner X Intermediate X Advanced

Step 1: Declare Your Fonts

In a CSS file in your project (I prefer to use typography.css as a convention) define your font families and their weights:

@font-face {
	font-family: 'Toby';
	src: url('./fonts/toby/toby-light.woff2') format('woff2');
	font-weight: 300;
}
@font-face {
	font-family: 'Toby';
	src: url('./fonts/toby/toby-regular.woff2') format('woff2');
	font-weight: 400;
}
@font-face {
	font-family: 'Toby';
	src: url('./fonts/toby/toby-bold.woff2') format('woff2');
	font-weight: 700;
}

@font-face {
	font-family: 'Tommy';
	src: url('./fonts/tommy/tommy-regular.woff2') format('woff2');
	font-weight: 400;
}

Of course, make sure to include this file in your project.

Also, feel free to add more font-weights, font-styles, as well as fallback font formats or change the font format to the one you have available. To learn more about different font formats and falling back, read A Comparison of All Major Font Files.

You can also instead use a link, for example:

@import url('https://cdn.website.com?family=terry,timmy');

Setp 2: Set up Tailwind Config

Inside your tailwind.config.js file (or whatever other config format you have), go inside your theme object:

theme: {
  fontFamily: {
    serif: ['Toby'],
    sans: ['Tommy']
  }
}

Be sure to use the name defined in your font-family of your @font-face rule.

Now, you can use your fonts like so:

font-sans or font-serif

Changing Names

You can also customize these names, for example:

theme: {
  fontFamily: {
    toby: ['Toby'],
    tommy: ['Tommy']
  }
}

font-toby and font-tommy

Fallback to Tailwind Font Stack

If you want to fallback to the default Tailwind font stack, you can first import the default theme:

const defaultTheme = require('tailwindcss/defaultTheme');

Then, you can use the spread operator to spread the array out into your font stack:

theme: {
  fontFamily: {
    serif: ['Toby', ...defaultTheme.fontFamily.serif],
    sans: ['Tommy', ...defaultTheme.fontFamily.sans]
  }
}

You can also use extend to keep the default Tailwind fonts and give your fonts names other than the Tailwind reserved ones:

extend: {
	fontFamily: {
		// ...
	}
}