In this tutorial we will see how to use font family in tailwind css. Also we will see responsive font family, custom font family example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Example 1
Tailwind css support 3 build in font family font-sans, font-serif, font-mono.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Font Family Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen gap-y-4">
<p class="font-sans"> This text will use the sans-serif font family.</p>
<p class="font-serif"> This text will use the font-serif font family.</p>
<p class="font-mono"> This text will use the font-mono font family.</p>
</div>
</body>
</html>
tailwind css font family font-sans, font-serif, font-mono
Tailwind CSS responsive font family.
<p class="font-sans lg:font-serif"> Tailwind CSS Responsive Font Family</p>
Example 2
tailwind css add custom font family.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Custome Font Family</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'culpa': ['"Mea Culpa"', 'cursive']
}
}
}
}
</script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<h2 class="text-4xl font-culpa">Tailwind CSS Custome Font Family Example</h2>
</div>
</body>
</html>
tailwind css add custom font family
Read Also
Tailwind CSS Use Custom Fonts Example
How to Use Font Weight in Tailwind CSS
Tailwind CSS Font Size Example
How to Use italic Font Style in Tailwind CSS
How to Use Font Smoothing in Tailwind CSS
