CSS Fonts Practice Questions with Solutions

By /

Introduction

CSS font properties control how text looks on a webpage. You can change the font family, size, style, weight, and more to improve readability and design. Choosing the right fonts makes your website easier to read and more attractive. In this chapter, you’ll practice CSS font properties through simple solved questions designed for beginners. CSS Fonts practice questions with solutions help to understand the concepts.

Question 1: Change the Font Family

Problem Statement

Write CSS to display all paragraph text using the Arial font.

CSS Code

p {
    font-family: Arial, sans-serif;
}

Output

All paragraph text appears in the Arial font. If Arial is unavailable, the browser uses a sans-serif font.

Explanation

  • font-family changes the font of the text.
  • Arial is the preferred font.
  • sans-serif acts as a fallback font if Arial is not available.

Question 2: Increase the Font Size

Problem Statement

Write CSS to set the font size of an <h1> heading to 40px.

CSS Code

h1 {
    font-size: 40px;
}

Output

The <h1> heading displays with a 40px font size.

Explanation

  • font-size controls the size of the text.
  • 40px makes the heading larger and easier to read.
  • Larger font sizes are commonly used for titles.

Question 3: Make the Text Bold

Problem Statement

Write CSS to make all paragraph text bold.

CSS Code

p {
    font-weight: bold;
}

Output

All paragraph text appears in bold.

Explanation

  • font-weight controls the thickness of the text.
  • bold makes the text darker and thicker.
  • Bold text is useful for emphasizing important content.

Question 4: Make the Text Italic

Problem Statement

Write CSS to display all <h2> headings in italic.

CSS Code

h2 {
    font-style: italic;
}

Output

All <h2> headings appear in italic.

Explanation

  • font-style changes the appearance of the text.
  • italic slants the text.
  • Italic text is often used for emphasis or quotations.

Question 5: Use the Font Shorthand Property

Problem Statement

Write CSS to apply the following styles to a paragraph:

  • Font Style: Italic
  • Font Weight: Bold
  • Font Size: 20px
  • Font Family: Arial

CSS Code

p {
    font: italic bold 20px Arial, sans-serif;
}

Output

The paragraph displays:

  • Italic text
  • Bold text
  • 20px font size
  • Arial font

Explanation

  • The font property combines multiple font properties into one line.
  • It makes the CSS shorter and easier to manage.
  • The order is: font-style → font-weight → font-size → font-family.

Question 6: Change Text to Small Capitals

Problem Statement

Write CSS to display all paragraph text in small capital letters.

CSS Code

p {
    font-variant: small-caps;
}

Output

The paragraph text appears in small capital letters.

Explanation

  • font-variant changes the appearance of lowercase letters.
  • small-caps displays lowercase letters as smaller uppercase letters.
  • This style is commonly used in headings and decorative text.

Question 7: Use a Numeric Font Weight

Problem Statement

Write CSS to set the font weight of an <h2> heading to 700.

CSS Code

h2 {
    font-weight: 700;
}

Output

The <h2> heading appears bold.

Explanation

  • Numeric values range from 100 to 900.
  • 700 is equivalent to bold.
  • Numeric values provide more control over font thickness.

Question 8: Change the Font Size Using em

Problem Statement

Write CSS to set the font size of a paragraph to 1.5em.

CSS Code

p {
    font-size: 1.5em;
}

Output

The paragraph text becomes 1.5 times the font size of its parent element.

Explanation

  • em is a relative unit.
  • 1.5em means the font size is 1.5 times the parent element’s font size.
  • Relative units help create responsive designs.

Question 9: Apply Different Fonts to Different Elements

Problem Statement

Write CSS to use different fonts for headings and paragraphs.

CSS Code

h1 {
    font-family: Georgia, serif;
}

p {
    font-family: Verdana, sans-serif;
}

Output

  • <h1> headings use the Georgia font.
  • Paragraphs use the Verdana font.

Explanation

  • Different elements can have different font families.
  • Georgia is a serif font.
  • Verdana is a sans-serif font.
  • Using different fonts helps create visual hierarchy.

Question 10: Set the Font Size Using rem

Problem Statement

Write CSS to set the font size of an <h3> heading to 2rem.

CSS Code

h3 {
    font-size: 2rem;
}

Output

The <h3> heading displays at 2 times the root font size.

Explanation

  • rem stands for root em.
  • 2rem is based on the root (html) font size instead of the parent element.
  • rem is widely used for responsive and consistent typography.

Key Takeaways

  • font-family changes the font style of text.
  • font-size controls the size of the text.
  • font-weight changes the thickness of the text.
  • font-style is used to create italic text.
  • font-variant: small-caps; displays text in small capital letters.
  • em and rem are relative units used for responsive typography.
  • The font shorthand property combines multiple font properties into one declaration.

Frequently Asked Questions (FAQs)

1. What is the font-family property in CSS?

The font-family property specifies which font should be used to display text. You can also provide fallback fonts if the preferred font is unavailable.

2. What is the difference between em and rem?

em is based on the font size of the parent element, while rem is based on the font size of the root (html) element.

3. What does font-weight: 700; mean?

700 is a numeric font weight that is equivalent to bold.

4. What is the purpose of font-variant: small-caps;?

It displays lowercase letters as smaller uppercase letters, creating a unique text style.

5. What is the advantage of using the font shorthand property?

The font shorthand allows you to set multiple font properties in a single line, making your CSS cleaner and easier to maintain.

6. Why should I use fallback fonts?

Fallback fonts ensure that text remains readable if the preferred font is not available on the user’s device.

7. Which unit is better for responsive typography: px, em, or rem?

rem is generally recommended because it provides consistent sizing across the website and makes responsive design easier to manage.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top