Published on January 12, 2021

How to add Fonts in Tailwind CSS

Tailwind CSS Fonts

Tailwind CSS offers powerful utilities for font customization, enabling you to create visually appealing and responsive text styles. In this guide, we will cover everything from using custom fonts and importing Google Fonts to integrating Font Awesome. By the end of this post, you should have a solid understanding of how to leverage Tailwind CSS for all your text editing needs.

Table of Content

Default Tailwind CSS Fonts
Applying Fonts to Text Elements
Tailwind Font Size
Tailwind Font style
Tailwind Font weight
Using Custom Fonts in Tailwind CSS
Adding Web Fonts to a Tailwind CSS Project
Extending Font Utilities
Replacing Tailwind CSS Fonts with Custom Fonts
Loading Local Fonts in Tailwind
Importing Google Fonts into Tailwind CSS
Using Font Awesome in Tailwind CSS
Conclusion

Default Tailwind CSS Fonts

Tailwind CSS comes with three default font styles: font-sans, font-serif, and font-mono. These fonts are designed to work well across different screens, ensuring a consistent and clean look for your projects.

Applying Fonts to Text Elements

To change the font of a text element, you can utilize the font-{family} classes provided by Tailwind CSS. For instance, the font-mono class applies a monospaced font, while the font-bold class sets the font weight to bold. By combining these font classes with other utility classes, such as text-{size} for font size and text-{color} for text color, you can create unique and visually appealing text styles

html

<div class="m-6 ">
	<p class="font-serif m-2 ">
		Lorem ipsum dolor sit amet consectetur adipisicing elit.
	</p>
	<p class="font-sans m-2">
		Lorem ipsum dolor sit amet consectetur adipisicing elit.
	</p>
	<p class="font-mono m-2">
		Lorem ipsum dolor sit amet consectetur adipisicing elit.
	</p>
</div>

Preview

Font family

Font-serif

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Font-mono

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Font-sans

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Tailwind Font Size

Tailwind CSS provides a range of font sizes that you can apply using classes like text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl, text-5xl, and text-6xl.

html

<div class="m-6 flex flex-col gap-4 rounded-xl p-8 bg-gray-200">
	<h3 class="mb-6 text-left font-sans text-gray-600 ">Font Size</h3>
	<div>
		<span class="font-medium text-sm font-mono mb-2  text-gray-500">
			Extra Small Text
		</span>
		<p class="text-xs mb-2 font-sans text-gray-900 ">
			Lorem ipsum dolor sit amet consectetur adipisicing elit.
		</p>
	</div>
	<div>
		<span class="font-medium text-sm font-mono mb-2 text-gray-500">
			Small Size
		</span>
		<p class="text-sm mb-2">
			Lorem ipsum dolor sit amet consectetur adipisicing elit.
		</p>
	</div>
	<div>
		<span class="font-medium text-sm font-mono mb-2 text-gray-500">
			Base Text
		</span>
		<p class="font-sans mb-2 text-base text-gray-900">
			Lorem ipsum dolor sit amet consectetur adipisicing elit.
		</p>
	</div>
	<div>
		<span class="font-medium text-sm font-mono mb-2 text-gray-500">
			Large Text
		</span>
		<p class="font-sans mb-2 text-lg text-gray-900">
			Lorem ipsum dolor sit amet consectetur adipisicing elit.
		</p>
	</div>
	<div>
		<span class="font-medium text-sm font-mono mb-2 text-gray-500">
			Extra Large Text
		</span>
		<p class="font-sans mb-2 text-xl text-gray-900">
			Lorem ipsum dolor sit amet consectetur adipisicing elit.
		</p>
	</div>
	<div>
		<span class="font-medium text-sm font-mono mb-2 text-gray-500">
			2x large text
		</span>
		<p class="font-sans mb-2 text-2xl text-gray-900">
			Lorem ipsum dolor sit amet consectetur adipisicing elit.
		</p>
	</div>
	<div>
		<span class="font-medium text-sm font-mono mb-2 text-gray-500">
			3X Large Text
		</span>
		<p class="font-sans mb-2 text-3xl text-gray-900">
			Lorem ipsum dolor sit amet consectetur adipisicing elit.
		</p>
	</div>
	<div>
		<span class="font-medium text-sm font-mono mb-2 text-gray-500">
			4X Large Text
		</span>
		<p class="font-sans mb-2 text-4xl text-gray-900">
			Lorem ipsum dolor sit amet consectetur adipisicing elit.
		</p>
	</div>
</div>

Preview

Tailwind Font style

Tailwind CSS allows you to apply different font styles effortlessly. You can use classes like italic and not-italic to toggle italic styles.

html

<div class="m-6 flex flex-col gap-4 rounded-xl p-8 bg-gray-200">
	<h3 class="mb-6 text-left font-sans text-gray-600 ">Font Style</h3>
	<div>
		<span class="font-medium text-sm font-mono mb-2  text-gray-500">
			Italic
		</span>
		<p class=" mb-2 font-sans font-normal italic">
			Lorem ipsum dolor sit amet consectetur adipisicing elit.
		</p>
	</div>
	<div>
		<span class="font-medium text-sm font-mono mb-2 text-gray-500">
			Non Italic
		</span>
		<p class="font-sans font-medium not-italic mb-2">
			Lorem ipsum dolor sit amet consectetur adipisicing elit.
		</p>
	</div>
</div>

Preview

Font Style

Italic

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Non Italic

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Tailwind Font weight

Adjusting font weight in Tailwind CSS is straightforward. Use classes such as font-thin, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, and font-black.

html

<p class="font-thin">
	Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p class="font-light">
	Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p class="font-normal">
	Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p class="font-medium">
	Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p class="font-semibold">
	Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p class="font-bold">
	Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p class="font-extrabold">
	Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p class="font-black">
	Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>

Preview

Font Weight

Font-thin

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Font-light

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Font-normal

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Font-medium

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Font-semibold

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Font-bold

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Font-extrabold

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Font-black

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Using Custom Fonts in Tailwind CSS

Custom fonts can make your design stand out. There are many ways you can use the Custom fonts to make your designs stands out. These include

Adding Web fronts to a tailwind project
Loading fonts Locally Let’s explore both methods in details.

Adding Web Fonts to a Tailwind CSS Project

There are two ways we can do this depending on what you wish to create. These ways include

Extending the Font utilities
Replacing the Tailwind Fonts with custom fonts

First, load your web font into the <head> tag of your HTML.

html

<link
	href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap"
	rel="stylesheet"
/>

<!-------or---->

<style>
	@import url("https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap");
</style>

Extending Font Utilities

To keep Tailwind’s default fonts and add your custom fonts, extend the existing font utilities in the tailwind.config.js file.

// tailwind.config.js

module.exports = {
	theme: {
		extend: {
			fontFamily: {
				nunito: ["Nunito", "sans-serif"],
			},
		},
	},
};

Run the following command to compile and build the styles:

bash

npx tailwindcss build styles.css -o styles/tailwind.css

This generates the necessary CSS, including both the default and new fonts.

Replacing Tailwind CSS Fonts with Custom Fonts

To replace the default Tailwind fonts, modify the theme.fontFamily section in the tailwind.config.js file.

// tailwind.config.js

module.exports = {
	theme: {
		fontFamily: {
			nunito: ["Nunito", "sans-serif"],
			myFont: ['"My Font"', "serif"],
			moreFonts: ['"MoreFonts"', "mono"],
		},
	},
};

Run the following command to compile and build the styles:

bash

npx tailwindcss build styles.css -o styles/tailwind.css

This generates a CSS file with only your custom fonts.

Loading Local Fonts in Tailwind

To use local fonts, first include the fonts in your project using the @font-face rule.

css

@font-face {
	font-family: "Roboto";
	src: url("/fonts/roboto.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

Then, customize the tailwind.config.js file to include your local fonts.

// tailwind.config.js

module.exports = {
	theme: {
		extend: {
			fontFamily: {
				sans: ["Roboto", "sans-serif"],
			},
		},
	},
};

Apply your local fonts to HTML elements:

html

<h1 class="font-sans">Welcome to My Website</h1>

Importing Google Fonts into Tailwind CSS

Another way of adding fonts to tailwind css is by importing the google fonts directly to your page. Simply add the font link to your HTML file’s <head> section.

html

<link
	href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
	rel="stylesheet"
/>

Then, extend the font utilities in tailwind.config.js to include your Google Font.

// tailwind.config.js

module.exports = {
	theme: {
		extend: {
			fontFamily: {
				roboto: ["Roboto", "sans-serif"],
			},
		},
	},
};

Using Font Awesome in Tailwind CSS

Font Awesome provides a vast library of icons that can be easily integrated into Tailwind CSS projects.

First, include Font Awesome in your HTML file’s <head> section.

html

<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>

Then, use Font Awesome icons in your HTML elements with Tailwind CSS classes for styling.

html

<div class="text-center text-3xl text-blue-500">
	<i class="fas fa-check-circle"></i> Success!
</div>

Conclusion

Tailwind CSS offers flexible and powerful utilities for font customization, allowing you to create stunning text styles with ease. Whether you're using default fonts, importing Google Fonts, or integrating Font Awesome, Tailwind CSS makes it simple to achieve the look you want. Follow the steps in this guide to enhance your projects with custom fonts and take your web design to the next level.

Back to blog posts

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs!

Build from scratch or select prebuilt tailwind templates

Learn more about Windframe