Custom font integration in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

How to correctly add a custom font in Tailwind CSS config?

You want to add a custom font named 'Lobster' to your Tailwind CSS project. Which option correctly extends the fontFamily in tailwind.config.js?

A module.exports = { fontFamily: { lobster: ['Lobster', 'cursive'] } }

B module.exports = { theme: { fontFamily: { lobster: ['Lobster', 'cursive'] } } }

C module.exports = { extend: { fontFamily: { lobster: ['Lobster', 'cursive'] } } }

D module.exports = { theme: { extend: { fontFamily: { lobster: ['Lobster', 'cursive'] } } } }

💡 Hint

Remember to use extend inside theme to add custom fonts without overwriting defaults.

Option D correctly extends the fontFamily inside the theme object. This way, Tailwind keeps its default fonts and adds your custom font.

Options A, C, and D either miss the extend or place the fontFamily in the wrong place, which can overwrite defaults or cause errors.

❓ rendering

intermediate

What will be the font style of this element?

Given this HTML and Tailwind CSS setup, what font will the text inside the <p> use?

tailwind.config.js includes:
fontFamily: { lobster: ['Lobster', 'cursive'] }

HTML:
<p class="font-lobster">Hello World</p>

Tailwind

<p class="font-lobster">Hello World</p>

A The text uses the 'Lobster' font if loaded, else falls back to cursive.

B The text uses the default sans-serif font.

C The text uses the browser default serif font.

D The text will not display because 'font-lobster' is not a valid Tailwind class.

💡 Hint

Check if the custom font class matches the config name.

Since the config defines lobster font family, Tailwind generates the class font-lobster. This applies the 'Lobster' font if available, else the cursive fallback.

Options B and C ignore the custom font. Option A is incorrect because the class is valid.

❓ selector

advanced

Which CSS selector applies the custom font only to headings inside

?

You want to apply your custom font class font-lobster only to all <h1> and <h2> inside the <main> element. Which CSS selector is correct?

A main > h1.font-lobster, main > h2.font-lobster

B main h1.font-lobster, main h2.font-lobster

C main h1, main h2 { @apply font-lobster; }

D h1.font-lobster, h2.font-lobster

💡 Hint

Think about selecting headings inside main that have the font class.

Option B selects all h1 and h2 inside main that have the font-lobster class.

Option B only selects direct children, which misses nested headings.

Option B tries to apply the font to all headings inside main regardless of class, which is different.

Option B selects headings anywhere with the class, ignoring the main container.

❓ layout

advanced

How to center text with custom font responsively?

You want to center a paragraph with class font-lobster horizontally on small screens and align left on medium and larger screens using Tailwind CSS. Which class combination achieves this?

Tailwind

<p class="font-lobster ???">Welcome!</p>

A text-center md:text-left

B text-left md:text-center

C text-center text-left md:text-left

D md:text-center text-left

💡 Hint

Remember Tailwind applies mobile-first styles, so base applies to small screens.

Option A sets text center by default (small screens) and switches to left on medium and up.

Option A reverses the order, so small screens are left aligned.

Option A has conflicting classes that override each other incorrectly.

Option A applies center only on medium screens but leaves small screens left aligned.

❓ accessibility

expert

Ensuring accessible custom font usage

You use a decorative custom font 'Lobster' for headings with class font-lobster. What is the best practice to keep your site accessible?

A Use the custom font with very small font size to avoid readability issues.

B Apply the custom font to all body text to keep consistency.

C Use the custom font only for decorative headings and provide a readable fallback font.

D Disable screen readers on elements using the custom font to prevent confusion.

💡 Hint

Think about readability and assistive technology users.

Option C is best because decorative fonts can be hard to read, so limiting their use and providing fallbacks helps all users.

Option C can reduce readability for body text.

Option C makes text hard to read.

Option C harms accessibility by hiding content from screen readers.