Text is ubiquitous on the web. Websites must have a legible and appropriate font that suits their target audience. Styling the text to indicate the importance or to provide an emphasis helps in the readability of the website.

Font Family

The CSS property font-family takes a list of font family names that the browser will use to render the text based on font availability.

In general, font families can be broadly categorized into:

• Serif fonts - Fonts that help improve readability in non-screen texts like in newspapers.

• Sans serif fonts - Fonts that help improve readability in screen texts like on a PC or a Macbook or even Androids and iPhones.

• Monospace fonts - Fonts that help improve readability in code.

TailwindCSS offers classes for all these font types - font-serif, font-sans, font-mono respectively.

If you want a one-off font family for a particular text, we can do so by specifying an arbitrary font family name within [] after font-

font-['Impact'] becomes font-family: 'Impact';
/* Spaces to be replaced with _ and use quotes like below */
font-['Times_New_Roman'] becomes font-family: 'Times New Roman';

Theming

TailwindCSS can be themed using tailwind.config.js The Font Family can be themed using theme.extend.fontFamily object. You can either override sans, serif, and mono if you want to continue using font-sans, font-serif, font-mono or if you want to include your own font-{suffix} you can do so too by specifying the suffix as key in theme.extend.fontFamily and value of type String | String[]

// Overriding 'font-sans' with String[] format
'sans': ['Helvetica', 'Arial', 'sans-serif'],

// Creating 'font-brand' with String format
'brand': 'Helvetica, Arial, sans-serif',

In the below example, I add a font-fancy class which will use cursive font family.

// tailwind.config.js
module.exports = {
  theme: { 
    extend: {
      fontFamily: {
        'fancy': 'cursive',
      }
    }
  }
}

Now let us put everything we've learned so far into action:

<p class="font-sans">Font Sans - The quick brown fox jumps over the lazy dog</p>
<p class="font-serif">Font Serif - The quick brown fox jumps over the lazy dog</p>
<p class="font-mono">Font Mono - The quick brown fox jumps over the lazy dog</p>
<p class="font-['Impact']">Arbitrary font Impact - The quick brown fox jumps over the lazy dog</p>
<p class="font-fancy">Font Fancy - The quick brown fox jumps over the lazy dog</p>

Customizing Default Font

By default, TailwindCSS's default theme Preflight's font-sans will be applied to the html element.

To have a different default font, you can either

1. Override font-sans in theme.fontFamily

2. Override it explicitly like below (don't worry about @layer base stuff for now, it will be covered in one of the articles later. Technically you can get away by not using it but it is the best practice, the "why" of it will be covered later).

    @layer base {
      html {
        font-family: Roboto, system-ui, sans-serif;
      }
    }
   

---

Font Size

The CSS property font-size sets the size of the font. Essentially, it lets you tell the browser how big you want your font to be displayed.

TailwindCSS has several in-built sizes which take the form text-{size} where size can be xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

We can also set an arbitrary value if required. Let's say we want our font-size to be 150px, we can set it as text-[150px]

Theming

We can theme the font sizes through theme.extend.fontSize object. Like with font family, we can override the existing built-in presets like base or add a completely new preset like huge

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        base: '15px', // overriding 'font-base'
        huge: '50px' // creating 'font-huge' with font-size: 50px;
      }
    }
  }
}

Let us now see all that we've learned in action

<p class="text-xs">Text Extra Small</p>
<p class="text-sm">Text Small</p>
<p class="text-base">Text Base/Regular</p>
<p class="text-lg">Text Large</p>
<p class="text-xl">Text Extra Large</p>
<p class="text-2xl">Text 2xl</p>
<p class="text-3xl">Text 3xl</p>
<p class="text-4xl">Text 4xl</p>
<p class="text-5xl">Text 5xl</p>
<p class="text-6xl">Text 6xl</p>
<p class="text-7xl">Text 7xl</p>
<p class="text-8xl">Text 8xl</p>
<p class="text-9xl">Text 9xl</p>
<p class="text-huge">Text Huge</p>
<p class="text-[150px]">150px Text</p>

---

Font Style

There are only two classes - italic and non-italic with the latter used to reset italic at different breakpoints or states which we'll see later.

<p class="non-italic">Non italic</p>
<p class="italic">Italic</p>

---

Font Weight

Arbitrary font-weights like font-[1100] are only applicable if the font supports it. Let us see the different font weights in action.

<p class="font-thin">Font Thin - 100</p>
<p class="font-extralight">Font Extra Light - 200</p>
<p class="font-light">Font Light - 300</p>
<p class="font-normal">Font Normal - 400</p>
<p class="font-medium">Font Medium - 500</p>
<p class="font-semibold">Font Semibold - 600</p>
<p class="font-bold">Font Bold - 700</p>
<p class="font-extrabold">Font Extra Bold - 800</p>
<p class="font-black">Font Black - 900</p>

Theming

Like others, you can theme font weight by theme.extend.fontWeight object. You can

1. Override existing font-weight presets like 'thin': '200'

2. Create a new font-weight preset like 'thick': '900'

---

Advanced

There are some rare-use cases where you might need to use Font Smoothing and Font Variant Numeric. It is left as an additional reading or an exercise.

---

Code

To make it easier to follow the series, I've created a Github Repository at AmitJoki/Learn-Tailwindcss

The code used in this article can be found here.