Tailwind CSS Font Family - GeeksforGeeks

Tailwind CSS Font Family

Last Updated : 28 Oct, 2026

Tailwind CSS provides utility classes to set the font family of an element. These classes are alternatives to the CSS font-family property. They use a list of fonts as a fallback system, allowing the browser to use another available font if the preferred font is unavailable.

Tailwind CSS provides the following default font family classes:

  • font-sans
  • font-serif
  • font-mono

1. font-sans

The font-sans class applies a sans-serif font family to an element. Sans-serif fonts do not have small decorative strokes at the ends of their letters.

Syntax:

<element class="font-sans">...</element>

Example:

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>Font Sans</title>
</head>
<!--Driver Code Ends-->

<body class="p-6 text-center">
    <h1 class="text-3xl font-bold text-green-600">
        GeeksforGeeks
    </h1>
    <p class="font-sans mt-4 text-lg">
        Tailwind CSS Sans-Serif Font
    </p>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The paragraph is displayed using a sans-serif font family.

2. font-serif

The font-serif class applies a serif font family to an element. Serif fonts have small decorative strokes at the ends of their letters.

Syntax:

<element class="font-serif">...</element>

Example:

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>Font Serif</title>
</head>
<!--Driver Code Ends-->

<body class="p-6 text-center">
    <h1 class="text-3xl font-bold text-green-600">
        GeeksforGeeks
    </h1>
    <p class="font-serif mt-4 text-lg">
        Tailwind CSS Serif Font
    </p>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The paragraph is displayed using a serif font family.

3. font-mono

The font-mono class applies a monospaced font family to an element. In monospaced fonts, each character occupies the same amount of horizontal space.

Syntax:

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>Font Mono</title>
</head>
<!--Driver Code Ends-->

<body class="p-6 text-center">
    <h1 class="text-3xl font-bold text-green-600">
        GeeksforGeeks
    </h1>
    <p class="font-mono mt-4 text-lg">
        Tailwind CSS Monospaced Font
    </p>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The paragraph is displayed using a monospaced font family.

Comment

Explore