Bird
Raised Fist0
Tailwindmarkup~5 mins

Font family utilities in Tailwind - Cheat Sheet & Quick Revision

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.
Click to reveal answer
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.
Click to reveal answer
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.
Click to reveal answer
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.
Click to reveal answer
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.
Click to reveal answer
Which Tailwind CSS utility applies a monospace font?
Afont-mono
Bfont-serif
Cfont-sans
Dfont-bold
What font style does font-serif apply?
ASerif font with decorative lines
BMonospace font
CBold font weight
DSans-serif font
If you want clean and modern text, which Tailwind utility should you use?
Afont-extrabold
Bfont-serif
Cfont-mono
Dfont-sans
Can you use font-sans and font-mono together on the same element?
AOnly if you use !important
BYes, they combine styles
CNo, one overrides the other
DOnly in Tailwind v3
Why prefer semantic font utilities like font-serif over custom fonts?
AThey only work on mobile
BThey load faster and improve readability
CThey are harder to use
DThey add animations
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.
You got /4 concepts.
    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.
    You got /4 concepts.

      Practice

      (1/5)
      1. Which Tailwind CSS class applies a sans-serif font to text?
      easy
      A. font-bold
      B. font-sans
      C. font-mono
      D. font-serif

      Solution

      1. Step 1: Understand font family classes in Tailwind

        Tailwind provides font-sans for sans-serif fonts, font-serif for serif fonts, and font-mono for monospace fonts.

      2. Step 2: Identify the class for sans-serif

        The class font-sans applies a sans-serif font style to text.

      3. Final Answer:

        font-sans -> Option B

      4. Quick Check:

        Sans-serif font class = font-sans [OK]
      Hint: Sans-serif font uses font-sans class in Tailwind [OK]
      Common Mistakes:
      • Confusing font-serif with sans-serif
      • Using font-bold which controls weight, not font family
      • Choosing font-mono which is monospace, not sans-serif
      2. Which of these is the correct Tailwind class to apply a monospace font?
      easy
      A. font-serif
      B. font-sans
      C. font-mono
      D. font-light

      Solution

      1. Step 1: Recall monospace font class in Tailwind

        Tailwind uses font-mono to apply monospace fonts, which have equal spacing for each character.

      2. Step 2: Confirm the correct class

        font-mono is the correct class to apply monospace fonts, while others apply serif, sans-serif, or font weight.

      3. Final Answer:

        font-mono -> Option C

      4. Quick Check:

        Monospace font class = font-mono [OK]
      Hint: Monospace font always uses font-mono class [OK]
      Common Mistakes:
      • Choosing font-serif or font-sans instead of font-mono
      • Confusing font-light (weight) with font family
      • Missing the monospace meaning of font-mono
      3. What font family will the following HTML render with Tailwind?
      <p class="font-serif">Hello World</p>
      medium
      A. Bold font
      B. Monospace font
      C. Sans-serif font
      D. Serif font

      Solution

      1. Step 1: Identify the class used in the paragraph

        The paragraph uses the class font-serif, which applies a serif font family.

      2. Step 2: Understand what serif font means

        Serif fonts have small decorative lines at the ends of letters, different from sans-serif or monospace fonts.

      3. Final Answer:

        Serif font -> Option D

      4. Quick Check:

        font-serif class = Serif font [OK]
      Hint: font-serif class means serif font family [OK]
      Common Mistakes:
      • Thinking font-serif applies sans-serif
      • Confusing font-serif with font-mono
      • Assuming font-bold changes font family
      4. Find the error in this Tailwind usage:
      <h1 class="font-sans-serif">Welcome</h1>
      medium
      A. font-sans-serif is not a valid Tailwind class
      B. Missing quotes around class name
      C. Should use font-mono for headings
      D. Class name should be font-bold

      Solution

      1. Step 1: Check the class name validity

        The class font-sans-serif is not a valid Tailwind font family class. Tailwind uses font-sans for sans-serif fonts.

      2. Step 2: Identify correct class for sans-serif

        The correct class to apply a sans-serif font is font-sans, not font-sans-serif.

      3. Final Answer:

        font-sans-serif is not a valid Tailwind class -> Option A

      4. Quick Check:

        Valid font family classes are font-sans, font-serif, font-mono [OK]
      Hint: Tailwind font classes are font-sans, font-serif, font-mono only [OK]
      Common Mistakes:
      • Adding extra words like '-serif' to font-sans
      • Confusing font weight classes with font family
      • Assuming font-mono is default for headings
      5. You want to style a code block with a monospace font and make it easy to read on small screens. Which Tailwind classes should you use?
      <code class="?">console.log('Hello')</code>
      hard
      A. font-mono text-sm
      B. font-serif text-lg
      C. font-sans text-xs
      D. font-mono text-xl

      Solution

      1. Step 1: Choose monospace font class for code

        Code blocks are best styled with monospace fonts, so use font-mono.

      2. Step 2: Select a small readable text size for small screens

        Use text-sm for smaller but readable text size on small devices.

      3. Final Answer:

        font-mono text-sm -> Option A

      4. Quick Check:

        Monospace + small text = font-mono text-sm [OK]
      Hint: Use font-mono with text-sm for readable code on small screens [OK]
      Common Mistakes:
      • Using font-serif or font-sans for code blocks
      • Choosing too large text size for small screens
      • Mixing font weight classes instead of font family