Custom font integration in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the custom font in Tailwind CSS.

Tailwind

@font-face { font-family: 'MyFont'; src: url('[1]'); }

Drag options to blanks, or click blank then click option'

A./fonts/MyFont.woff2

BMyFont.woff2

C/fonts/MyFont.ttf

Dfonts/MyFont.otf

Attempts:

3 left

💡 Hint

Common Mistakes

Using just the filename without path

Using wrong file extension

Missing the relative path prefix

The src property needs the correct relative path to the font file. Using ./fonts/MyFont.woff2 correctly points to the font file in the fonts folder.

2fill in blank

medium

Complete the Tailwind config to add the custom font family.

Tailwind

module.exports = { theme: { extend: { fontFamily: { custom: ['[1]', 'sans-serif'] } } } }

Drag options to blanks, or click blank then click option'

AMyFont

Bmyfont

C'MyFont'

DmyFont

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or different casing

Including quotes inside the array

Mismatching the font-family name

The font family name should match exactly the name used in @font-face. Here, 'MyFont' is correct without quotes inside the array.

3fill in blank

hard

Fix the error in the Tailwind class to apply the custom font.

Tailwind

<p class="font-[1]">Hello World</p>

Drag options to blanks, or click blank then click option'

AfontCustom

Bmyfont

Ccustom

DMyFont

Attempts:

3 left

💡 Hint

Common Mistakes

Using the font-family name instead of the config key

Using camelCase instead of kebab-case

Adding extra prefixes

The Tailwind class uses the key defined in fontFamily in the config. Since the key is custom, the class is font-custom.

4fill in blank

hard

Fill both blanks to complete the Tailwind config for custom font and enable JIT mode.

Tailwind

module.exports = { mode: '[1]', theme: { extend: { fontFamily: { custom: ['[2]', 'sans-serif'] } } } }

Drag options to blanks, or click blank then click option'

Ajit

BMyFont

CMyfont

Dclassic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'classic' instead of 'jit' for mode

Incorrect casing in font family name

Missing quotes around mode value

JIT mode is enabled by setting mode to 'jit'. The font family name must match the font-face name exactly, which is 'MyFont'.

5fill in blank

hard

Fill all three blanks to complete the CSS @font-face rule with font-family, font-weight, and src.

Tailwind

@font-face { font-family: '[1]'; font-weight: [2]; src: url('[3]'); }

Drag options to blanks, or click blank then click option'

AMyFont

B400

C./fonts/MyFont-Regular.woff2

Dbold

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bold' instead of numeric weight

Incorrect font-family name

Wrong path or missing relative prefix in src

The font-family must match the custom font name. The font-weight is numeric for normal weight, and the src is the relative path to the font file.