Font Weight and Family
Set boldness and typeface with font-* utilities.
Syntax
class="font-bold font-serif"Weight utilities go from font-thin to font-black. Family utilities switch between the three built-in stacks.
font-normal,font-semibold,font-bold.font-sans,font-serif,font-mono.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer bolds a price label using font-bold to draw the eye without changing any other typographic property.
- A site uses font-sans as the default body typeface and switches to font-mono inside code blocks.
- A form field label is set to font-medium to sit between the regular body text and a bold heading in the visual hierarchy.
More examples
Weight scale in headings
Using font-extrabold, font-semibold, and font-normal creates a three-level typographic hierarchy without any custom CSS.
<h1 class="text-4xl font-extrabold">Hero Title</h1>
<h2 class="text-2xl font-semibold">Section Title</h2>
<p class="text-base font-normal">Body paragraph text.</p>Font family switching
font-sans applies Tailwind's default UI font stack while font-mono switches to a monospace typeface for code snippets.
<p class="font-sans text-gray-800">UI copy in the sans-serif stack.</p>
<pre class="font-mono text-sm bg-gray-100 p-3 rounded">
const x = 42;
</pre>Subtle label weight
font-medium on the label makes it visually distinct from font-normal input text, reinforcing the label-to-field relationship.
<label class="block text-sm font-medium text-gray-700 mb-1">
Email address
</label>
<input type="email" class="w-full border rounded px-3 py-2 text-base font-normal">
Discussion