Font weight control in Tailwind - Performance & Optimization

Performance: Font weight control

MEDIUM IMPACT

Font weight control affects text rendering speed and page load by influencing font file size and browser paint time.

Applying multiple font weights unnecessarily

Tailwind

<p class="font-bold">Text</p>

Using a single font weight reduces font file size and speeds up text rendering.

📈 Performance Gainsaves 50-150kb, faster LCP by reducing font load blocking

Applying multiple font weights unnecessarily

Tailwind

<p class="font-thin font-bold font-extrabold">Text</p>

Loading multiple font weights increases font file size and delays text rendering.

📉 Performance Costadds 50-150kb to font bundle, blocks rendering until fonts load

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple font weights loaded	No extra DOM nodes	0	High paint cost due to font load delay	[X] Bad
Single font weight used	No extra DOM nodes	0	Lower paint cost, faster text rendering	[OK] Good

Rendering Pipeline

Font weight control affects the browser's font loading and text painting stages, impacting how quickly text appears.

→Font Loading

→Paint

→Composite

⚠️ BottleneckFont Loading delays paint and composite stages causing slower text display.

Core Web Vital Affected

LCP

Font weight control affects text rendering speed and page load by influencing font file size and browser paint time.

Optimization Tips

1Limit font weights to only those used on the page.

2Preload critical font weights to reduce blocking.

3Use font-display: swap to avoid invisible text during font load.

Performance Quiz - 3 Questions

How does using many font weights affect page load?

A Increases font file size and delays text rendering

B Reduces font file size and speeds up rendering

C Has no effect on page load

D Improves browser caching automatically

DevTools: Performance

How to check: Record a page load, then filter for 'Font' events and check font load times and blocking.

What to look for: Long font load times or blocking periods before text paint indicate font weight overuse.

Practice

1. Which Tailwind class makes text appear very thin?

easy

A. font-light

B. font-bold

C. font-black

D. font-thin

Solution

1. Step 1: Understand font weight scale in Tailwind

   Tailwind uses classes like font-thin for very thin text and font-black for very thick text.

2. Step 2: Identify the class for very thin text

   font-thin is the class that makes text very thin, thinner than font-light.

3. Final Answer:

   font-thin -> Option D

4. Quick Check:

   Thin text = font-thin [OK]

Hint: Thin text uses font-thin class in Tailwind [OK]

Common Mistakes:

• Confusing font-thin with font-light
• Choosing font-bold which is thick text
• Thinking font-black is thin

2. Which of these is the correct Tailwind class to make text bold?

easy

A. font-heavy

B. font-bold

C. font-strong

D. font-thick

Solution

1. Step 1: Recall Tailwind font weight classes

   Tailwind uses specific class names like font-bold for bold text, not generic words like heavy or thick.

2. Step 2: Identify the correct class for bold text

   font-bold is the official class to make text bold in Tailwind.

3. Final Answer:

   font-bold -> Option B

4. Quick Check:

   Bold text = font-bold [OK]

Hint: Bold text always uses font-bold class [OK]

Common Mistakes:

• Using non-existent classes like font-heavy
• Confusing font-bold with font-thick
• Trying font-strong which is invalid

3. What font weight will the text have with this class: font-semibold?

medium

A. Medium-bold text

B. Normal weight text

C. Very thin text

D. Very thick text

Solution

1. Step 1: Understand Tailwind font weight scale

   Classes go from thin, light, normal, medium, semibold, bold, to black. font-semibold is between medium and bold.

2. Step 2: Match font-semibold to weight description

   font-semibold means medium-bold text, stronger than normal but not the thickest.

3. Final Answer:

   Medium-bold text -> Option A

4. Quick Check:

   font-semibold = medium-bold [OK]

Hint: Semibold means medium-bold weight in Tailwind [OK]

Common Mistakes:

• Thinking font-semibold is very thin
• Confusing it with normal weight
• Assuming it means very thick text

4. You want to make text bold but accidentally write font-bld. What happens?

medium

A. Text stays normal weight

B. Text becomes bold anyway

C. Tailwind throws an error and stops loading

D. Text disappears from the page

Solution

1. Step 1: Check if font-bld is a valid Tailwind class

   font-bld is not a valid Tailwind class, so it won't apply any font weight style.

2. Step 2: Understand how invalid classes behave

   Invalid classes are ignored by Tailwind CSS, so the text keeps its default normal weight.

3. Final Answer:

   Text stays normal weight -> Option A

4. Quick Check:

   Invalid class ignored = normal weight text [OK]

Hint: Invalid classes do nothing; text stays default weight [OK]

Common Mistakes:

• Expecting Tailwind to throw an error
• Thinking text becomes bold anyway
• Assuming text disappears

5. You want to style a heading with very thick text but also make it responsive: thin on small screens and black on large screens. Which Tailwind classes do you use?

hard

A. font-light lg-font-black

B. font-thin font-lg:font-black

C. font-thin lg:font-black

D. font-thin lg-font-black

Solution

1. Step 1: Identify base and responsive classes

   Base class applies to all screen sizes; responsive prefixes like lg: apply styles on large screens.

2. Step 2: Check correct syntax for responsive font weight

   font-thin sets thin text by default; lg:font-black applies very thick text on large screens.

3. Step 3: Eliminate incorrect options

   Options with font-lg:font-black or lg-font-black are invalid syntax in Tailwind.

4. Final Answer:

   font-thin lg:font-black -> Option C

5. Quick Check:

   Responsive prefix = lg:font-black [OK]

Hint: Use lg: prefix for large screen styles [OK]

Common Mistakes:

• Using incorrect responsive syntax like font-lg:
• Missing colon after lg
• Confusing base and responsive classes