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.
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
You can also see Tailwind CSS Use Custom Fonts Example
