Tutorials


Font Family, Weight, and Style Utilities in Tailwind CSS


Font Family, Weight, and Style Utilities in Tailwind CSS

Tailwind CSS provides utilities to control font family, weight, and style, which are essential for typography and ensuring text appears as desired across different devices and browsers.

1. Font Family

Font family utilities in Tailwind CSS allow you to specify which font family should be applied to text elements. Tailwind provides a set of default font families, and you can also extend them as needed.

Utility Classes

  • font-{family}: Sets the font family of the text.

Common Values:

  • font-sans: Applies a sans-serif font family (e.g., Helvetica, Arial).
  • font-serif: Applies a serif font family (e.g., Times New Roman, Georgia).
  • font-mono: Applies a monospace font family (e.g., Courier New, Monaco).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Family Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="font-sans bg-blue-500 text-white p-4">
    Sans-serif font family
  </p>
  <p class="font-serif bg-red-500 text-white p-4 mt-4">
    Serif font family
  </p>
  <p class="font-mono bg-green-500 text-white p-4 mt-4">
    Monospace font family
  </p>
</body>
</html>

In this example:

  • font-sans sets the text to a sans-serif font.
  • font-serif sets the text to a serif font.
  • font-mono sets the text to a monospace font.

2. Font Weight

Font weight utilities in Tailwind CSS control the thickness of the text. Tailwind provides a range of weights from light to bold.

Utility Classes

  • font-{weight}: Sets the font weight of the text.

Common Values:

  • font-thin: Applies font weight 100.
  • font-extralight: Applies font weight 200.
  • font-light: Applies font weight 300.
  • font-normal: Applies font weight 400.
  • font-medium: Applies font weight 500.
  • font-semibold: Applies font weight 600.
  • font-bold: Applies font weight 700.
  • font-extrabold: Applies font weight 800.
  • font-black: Applies font weight 900.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Weight Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="font-thin bg-blue-500 text-white p-4">
    Thin font weight
  </p>
  <p class="font-normal bg-red-500 text-white p-4 mt-4">
    Normal font weight
  </p>
  <p class="font-bold bg-green-500 text-white p-4 mt-4">
    Bold font weight
  </p>
</body>
</html>

In this example:

  • font-thin applies a thin font weight.
  • font-normal applies a normal font weight.
  • font-bold applies a bold font weight.

3. Font Style

Font style utilities in Tailwind CSS control the style of the text, such as italicization or normal text style.

Utility Classes

  • italic: Applies an italic style to the text.
  • not-italic: Removes the italic style (sets to normal text style).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Style Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="italic bg-blue-500 text-white p-4">
    Italic text style
  </p>
  <p class="not-italic bg-red-500 text-white p-4 mt-4">
    Normal text style
  </p>
</body>
</html>

In this example:

  • italic applies an italic style to the text.
  • not-italic sets the text to a normal (non-italic) style.

4. Customizing Font Family, Weight, and Style

You can customize the font families, weights, and styles in the tailwind.config.js file if you need additional options or specific font settings.

Configuration Example:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        custom: ['"Open Sans"', 'sans-serif'],
      },
      fontWeight: {
        hairline: '100',
        extraBold: '800',
      },
      fontStyle: {
        oblique: 'oblique',
      },
    },
  },
};

Using Custom Configurations:

Font Family:

<p class="font-custom bg-blue-500 text-white p-4">
  Custom font family
</p>

Font Weight:

<p class="font-hairline bg-red-500 text-white p-4 mt-4">
  Hairline font weight
</p>
<p class="font-extraBold bg-green-500 text-white p-4 mt-4">
  Extra bold font weight
</p>

Font Style:

<p class="italic bg-blue-500 text-white p-4">
  Italic text style
</p>
<p class="font-oblique bg-red-500 text-white p-4 mt-4">
  Oblique text style (custom)
</p>

Summary

  • Font Family: Use classes like font-sans, font-serif, and font-mono to set the font family of text elements.
  • Font Weight: Use classes like font-thin, font-normal, and font-bold to control the weight of the text.
  • Font Style: Use classes like italic and not-italic to apply or remove italic styling.


Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about