Font family utilities in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Tailwind CSS utility font-sans do?

It applies a sans-serif font family to the text, making it look clean and modern, like Arial or Helvetica.

beginner

How do you apply a monospace font using Tailwind CSS?

Use the utility font-mono. It changes the text to a monospace font, where each letter takes up the same space, like in code editors.

beginner

What is the difference between font-serif and font-sans in Tailwind CSS?

font-serif applies a serif font with small decorative lines on letters, giving a traditional look. font-sans applies a clean, modern sans-serif font without those lines.

intermediate

Can you combine Tailwind font family utilities like font-sans and font-mono on the same element?

No, only one font family utility should be used per element because they override each other. Choose the one that fits your design best.

intermediate

Why is it important to use semantic font family utilities like font-serif instead of custom fonts everywhere?

Semantic utilities ensure consistent style and better accessibility. They use system fonts that load fast and are familiar to users, improving readability.

Which Tailwind CSS utility applies a monospace font?

A font-mono

B font-serif

C font-sans

D font-bold

font-mono sets the font to monospace, where each character has equal width.

What font style does font-serif apply?

A Serif font with decorative lines

B Monospace font

C Bold font weight

D Sans-serif font

font-serif applies a serif font that has small decorative lines on letters.

If you want clean and modern text, which Tailwind utility should you use?

A font-extrabold

B font-serif

C font-mono

D font-sans

font-sans applies a clean, modern sans-serif font.

Can you use font-sans and font-mono together on the same element?

A Only if you use !important

B Yes, they combine styles

C No, one overrides the other

D Only in Tailwind v3

Only one font family utility should be used per element because they override each other.

Why prefer semantic font utilities like font-serif over custom fonts?

A They only work on mobile

B They load faster and improve readability

C They are harder to use

D They add animations

Semantic font utilities use system fonts that load quickly and are familiar, improving readability.

Explain the purpose of Tailwind CSS font family utilities and name the three main ones.

Think about the basic font categories you see in word processors.

Describe why you should not combine multiple font family utilities on the same element in Tailwind CSS.

Consider how CSS rules work when multiple conflicting styles are applied.