🔤 Tailwind CSS - Font (Family, Size, Style, Weight & More)

Tailwind provides comprehensive font utilities covering font family, size, style, weight, smoothing, and numeric variant features.

Available utilities:

• font-sans – System sans-serif stack (default)
• font-serif – System serif stack
• font-mono – System monospace stack
• Arbitrary: font-['Inter']

Available utilities (text-{size}):

• text-xs – 0.75rem / 1rem line-height
• text-sm – 0.875rem
• text-base – 1rem (default)
• text-lg – 1.125rem
• text-xl – 1.25rem
• text-2xl through text-9xl
• Arbitrary: text-[22px]

Font Style:

• italic – Italic text
• not-italic – Normal (non-italic) text

Font Smoothing:

• antialiased – Smooth font rendering (recommended)
• subpixel-antialiased – Subpixel rendering

Available utilities (font-{weight}):

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

Control numeric glyph variants:

• normal-nums – Default numeric glyphs
• ordinal – Special glyphs for ordinals (1st, 2nd)
• slashed-zero – Slashed zero (0̸)
• lining-nums – Lining numerals
• oldstyle-nums – Old-style numerals
• proportional-nums – Proportional spacing
• tabular-nums – Tabular (fixed-width) spacing
• diagonal-fractions / stacked-fractions