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.

Practice

1. What is the main purpose of using @font-face in Tailwind CSS when integrating a custom font?

easy

A. To load and define a custom font so it can be used in your styles

B. To create animations for text using the font

C. To automatically download fonts from Google Fonts

D. To change the font size of text elements

Solution

1. Step 1: Understand the role of @font-face

   @font-face is a CSS rule that lets you load a custom font file into your website.

2. Step 2: Connect @font-face to Tailwind usage

   After loading the font with @font-face, you extend Tailwind's fontFamily to use that font in your classes.

3. Final Answer:

   To load and define a custom font so it can be used in your styles -> Option A

4. Quick Check:

   @font-face loads fonts = D [OK]

Hint: Remember: @font-face loads fonts, not styles [OK]

Common Mistakes:

• Thinking @font-face changes font size
• Confusing font loading with animations
• Assuming it downloads fonts automatically

2. Which of the following is the correct way to extend Tailwind's fontFamily in tailwind.config.js to add a custom font named 'MyFont'?

easy

A. fontFamily: { myfont: 'MyFont' }

B. fontFamily: { 'MyFont': ['custom', 'sans-serif'] }

C. fontFamily: { custom: ['MyFont', 'sans-serif'] }

D. fontFamily: { custom: 'MyFont', fallback: 'sans-serif' }

Solution

1. Step 1: Recall Tailwind fontFamily syntax

   Tailwind expects font families as arrays with font names and fallbacks, e.g., fontFamily: { key: ['FontName', 'fallback'] }.

2. Step 2: Match correct syntax

   fontFamily: { custom: ['MyFont', 'sans-serif'] } correctly uses custom as key and an array with 'MyFont' and 'sans-serif'. Others misuse keys or values.

3. Final Answer:

   fontFamily: { custom: ['MyFont', 'sans-serif'] } -> Option C

4. Quick Check:

   fontFamily uses arrays for fonts = C [OK]

Hint: Use arrays for font names and fallbacks in config [OK]

Common Mistakes:

• Using strings instead of arrays for fontFamily
• Swapping keys and values
• Missing fallback fonts

3. Given this Tailwind config extension:

fontFamily: { custom: ['MyFont', 'sans-serif'] }

and this HTML:

<p class="font-custom">Hello</p>

What font will the paragraph use if 'MyFont' is loaded correctly?

medium

A. No font, text will be invisible

B. The browser default font

C. 'sans-serif' fallback font only

D. 'MyFont' custom font

Solution

1. Step 1: Understand class usage

   The class font-custom applies the font family named 'custom' from Tailwind config.

2. Step 2: Check font loading

   If 'MyFont' is loaded correctly via @font-face, it will be used first, with 'sans-serif' as fallback.

3. Final Answer:

   'MyFont' custom font -> Option D

4. Quick Check:

   font-custom uses 'MyFont' if loaded = A [OK]

Hint: font-custom uses your custom font if loaded properly [OK]

Common Mistakes:

• Assuming fallback font is always used
• Confusing class name with default fonts
• Thinking text disappears without font

4. You added this to your CSS:

@font-face { font-family: 'MyFont'; src: url('/fonts/MyFont.woff2'); }

But your text with font-custom class still shows default font. What is the likely mistake?

medium

A. You used the wrong font file format

B. You forgot to extend fontFamily in tailwind.config.js

C. You applied the wrong Tailwind class name

D. You did not include the font file in your HTML

Solution

1. Step 1: Check font-face usage

   The font is loaded with @font-face, so the font file is available.

2. Step 2: Verify Tailwind config

   Without extending fontFamily in tailwind.config.js, the class font-custom won't apply the new font.

3. Final Answer:

   You forgot to extend fontFamily in tailwind.config.js -> Option B

4. Quick Check:

   fontFamily extension missing = B [OK]

Hint: Always extend fontFamily to use custom fonts in Tailwind [OK]

Common Mistakes:

• Not extending fontFamily in config
• Using wrong class names
• Forgetting to rebuild Tailwind after config change

5. You want to use two custom fonts, 'MyFontBold' and 'MyFontLight', in Tailwind. How should you configure tailwind.config.js and your CSS to use font-boldcustom and font-lightcustom classes for them?

hard

A. Define two @font-face rules with different font-family names and extend fontFamily with keys 'boldcustom' and 'lightcustom' pointing to those fonts

B. Use one @font-face with both fonts and extend fontFamily with a single key

C. Only extend fontFamily once and use CSS font-weight to switch fonts

D. Add both fonts in one @font-face and use font-custom class for both

Solution

1. Step 1: Define separate @font-face rules

   Each font variant needs its own @font-face with unique font-family names like 'MyFontBold' and 'MyFontLight'.

2. Step 2: Extend Tailwind's fontFamily

   In tailwind.config.js, add keys 'boldcustom' and 'lightcustom' pointing to these font-family names so you can use font-boldcustom and font-lightcustom classes.

3. Final Answer:

   Define two @font-face rules and extend fontFamily with 'boldcustom' and 'lightcustom' -> Option A

4. Quick Check:

   Separate font-faces + fontFamily keys = A [OK]

Hint: Use separate font-family names and keys for each font variant [OK]

Common Mistakes:

• Trying to combine fonts in one @font-face
• Using CSS font-weight instead of separate font-family
• Not extending fontFamily for each font variant