Custom font integration in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the first step to use a custom font in Tailwind CSS?

You need to import the custom font files (like .woff or .ttf) into your project and define them in your CSS using <code>@font-face</code>.

beginner

How do you add a custom font family to Tailwind's configuration?

In tailwind.config.js, extend the theme.fontFamily object by adding your custom font name and fallback fonts.

beginner

Why should you include fallback fonts when defining a custom font in Tailwind?

Fallback fonts ensure text is still readable if the custom font fails to load or is unsupported on some devices.

beginner

How do you apply your custom font to an element using Tailwind classes?

Use the class name you defined in <code>tailwind.config.js</code> for your font family, for example <code>class="font-customName"</code>.

intermediate

What is a good practice to ensure your custom font works well on different screen sizes?

Use responsive design with Tailwind’s utility classes and test font appearance on various devices to maintain readability.

Which file do you modify to add a custom font family in Tailwind CSS?

A tailwind.config.js

B index.html

C package.json

D postcss.config.js

The tailwind.config.js file is where you extend Tailwind's theme settings, including fonts.

What CSS rule is used to load a custom font file?

A @import-font

B @font-load

C @font-face

D @font-style

The @font-face rule defines custom fonts by linking font files to font-family names.

Why include fallback fonts when defining a custom font?

A To add animations

B To improve loading speed

C To reduce file size

D To ensure text displays if custom font fails

Fallback fonts ensure text remains readable if the custom font cannot load.

How do you apply a custom font named 'myFont' in Tailwind CSS classes?

A class="font-family-myFont"

B class="font-myFont"

C class="myFont"

D class="text-myFont"

Tailwind uses the prefix font- followed by the font name to apply font families.

Which unit is recommended for font sizes in Tailwind for better accessibility?

A rem

B pt

C px

D cm

Using rem units scales fonts relative to the root size, improving accessibility and responsiveness.

Explain the steps to add and use a custom font in a Tailwind CSS project.

Think about loading the font, telling Tailwind about it, then using it.

Why is it important to include fallback fonts and test your custom font on different devices?

Consider what happens if the font doesn’t load or looks different.