Tailwind CSS - Font Family

Previous
Quiz
Next

Tailwind CSS font family defines how text appears on websites by grouping multiple fonts with similar designs under a single name. Each font family offers distinct styles or weights that are applied using utility classes.

Tailwind CSS Font Family Classes

Below is a list of Tailwind CSS classes that define font families, each with its own distinctive design.

Class CSS Properties
font-sans font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-serif font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-mono font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace;

Functionality of Tailwind CSS Font Family Classes

  • font-sans: A utility class that applies a sans-serif font style to text, commonly used for digital content and headings.
  • font-serif: This is a utility class that applies a serif font style to text, improving readability in printed materials such as newspapers.
  • font-monospaced: A utility class that applies monospaced fonts for equal character spacing, commonly used in technical content such as coding.

Tailwind CSS Font Family Class Examples

Below are some examples for the Tailwind CSS Font Family class, offering simple ways to customize design or formatting with various font options, including the ability to choose your own fonts directly for webpages.

Setting Sans Font Family

This example shows the use of Tailwind CSS to style text with a sans-serif font family.

Example

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold">
        Tailwind CSS Font Family
    </h1>
    <p class="underline">Using font-sans</p>
    <p class="font-sans">
        This paragraph uses a Sans font 
        styled with Tailwind CSS.
    </p>
    <br>
    <p class="underline">Not using font-sans</p>
    <p>
        This paragraph does not use a sans 
        font styled with Tailwind CSS. 
    </p>
</body>

</html>

Setting Serif Font Family

This example shows the use of Tailwind CSS to style text with a serif font family.

Example

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold">
        Tailwind CSS Font Family
    </h1>
    <p class="underline">Using font-serif</p>
    <p class="font-serif">
        This paragraph uses a Serif font styled 
        with Tailwind CSS.
    </p>
    <br>
    <p class="underline">
        Not using font-serif
    </p>
    <p>
        This paragraph does not use a serif font 
        styled with Tailwind CSS.
    </p>
</body>

</html>

Setting Monospaced Font Family

This example shows the use of Tailwind CSS to style text with a Monospaced font family.

Example

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold">
        Tailwind CSS Font Family
    </h1>
    <p class="underline">Using font-mono</p>
    <p class="font-mono">
        This paragraph uses a Monospaced font 
        styled with Tailwind CSS.
    </p>
    <br>
    <p class="underline">Not using font-mono</p>
    <p>
       This paragraph does not use a Monospaced 
       font styled with Tailwind CSS.
    </p>
</body>

</html>
Print Page
Previous
Next