CSS Fonts

By /

In this chapter, you will learn how to change the appearance of text using CSS fonts. You can choose a different font, change its size, make it bold, or style it in different ways. Let’s look at the most commonly used CSS font properties step by step.

1. Font Family

The font-family property is used to change the typeface of text. For example:

p {
  font-family: Arial;
}

This displays the paragraph using the Arial font.

You can also add more than one font as a backup. If the first font is not available, the browser will try the next one.

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

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Font Family</title>

  <style>
    h1 {
      font-family: Georgia, serif;
    }

    p {
      font-family: Arial, sans-serif;
    }
  </style>
</head>

<body>

  <h1>Learning CSS Fonts</h1>

  <p>This paragraph uses the Arial font.</p>

</body>
</html>

The heading and paragraph will appear with different font styles.

2. Font Size

The font-size property is used to change the size of text. For example:

p {
  font-size: 20px;
}

This sets the paragraph text size to 20px.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Font Size</title>

  <style>
    h1 {
      font-size: 40px;
    }

    p {
      font-size: 20px;
    }
  </style>
</head>

<body>

  <h1>This is a Large Heading</h1>

  <p>This is a paragraph with a font size of 20px.</p>

</body>
</html>

You can use different units for font size, but px is easy to understand when you are starting.

3. Font Weight

The font-weight property controls how thick or thin the text appears. For example:

p {
  font-weight: bold;
}

This makes the text bold.

You can also use numbers such as:

p {
  font-weight: 400;
}

Common values include:

  • normal or 400 → Normal text
  • bold or 700 → Bold text

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Font Weight</title>

  <style>
    .normal {
      font-weight: normal;
    }

    .bold {
      font-weight: bold;
    }
  </style>
</head>

<body>

  <p class="normal">This is normal text.</p>

  <p class="bold">This is bold text.</p>

</body>
</html>

Not every font supports every font weight, so the result may depend on the font you are using.

4. Font Style

The font-style property is used to change the style of text. A commonly used value is:

p {
  font-style: italic;
}

This makes the text italic.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Font Style</title>

  <style>
    .italic {
      font-style: italic;
    }
  </style>
</head>

<body>

  <p class="italic">This text is italic.</p>

</body>
</html>

You can also use:

font-style: normal;

This displays the text in its normal style.

5. Using the Font Shorthand Property

Instead of writing multiple font properties separately, CSS provides the font shorthand property. For example:

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

This combines:

  • italic → Font style
  • bold → Font weight
  • 20px → Font size
  • Arial → Font family

When you are learning CSS, using separate properties can make your code easier to understand. The shorthand property becomes more useful once you are comfortable with the individual properties.

Complete Font Example

Now, let’s use different font properties together.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Fonts Example</title>

  <style>
    h1 {
      font-family: Georgia, serif;
      font-size: 40px;
      font-weight: bold;
    }

    p {
      font-family: Arial, sans-serif;
      font-size: 18px;
      font-style: italic;
      line-height: 1.6;
    }
  </style>
</head>

<body>

  <h1>CSS Fonts</h1>

  <p>
    CSS allows you to change the font, size, weight, and style
    of text on a web page.
  </p>

</body>
</html>

Here, the heading uses a different font and a larger size, while the paragraph uses an italic style and more space between lines.

Quick Recap

  • font-family changes the typeface of text.
  • font-size changes the size of text.
  • font-weight controls how thick the text appears.
  • font-style can make text italic.
  • You can provide backup fonts using a font stack.
  • The font property can combine multiple font settings.

Mini Quiz

0%

CSS - QUIZ 12

1 / 5

Q1. Which CSS property changes the typeface of text?

2 / 5

Q2. Which value makes text bold?

3 / 5

Q3. Which property controls how large or small text appears?

4 / 5

Q4. What does font-style: italic; do?

5 / 5

Q5. In the CSS font shorthand, what does 20px represent?

Your score is

The average score is 0%

0%

By Wordpress Quiz plugin

Frequently Asked Questions (FAQs)

Q1. What are CSS fonts?

CSS fonts are used to control the appearance of text on a web page. You can change the font family, size, weight, and style of text using CSS.

Q2. How do I change the font in CSS?

You can change the typeface of text using the font-family property. You can also provide backup fonts in case the first font is not available.

Q3. What is font-family in CSS?

The font-family property is used to specify the typeface that should be applied to text.

Q4. What is font-size in CSS?

The font-size property controls the size of text. It can be set using different units, such as pixels.

Q5. What is font-weight in CSS?

The font-weight property controls how thick or thin text appears. Common values include normal and bold, along with numeric weight values.

Q6. What is font-style in CSS?

The font-style property is used to change the appearance of text, such as making it italic or displaying it in its normal style.

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

Related Posts

Scroll to Top