X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS Font

In this chapter we will speak about fonts.

The CSS font properties are used for defining the size, font family, boldness and the style of the text.

Besides, it sets the font of the element to a system font.

The CSS font property is considered to be a shorthand property. So, here we will explain the following properties:

When we write some information, some text or link in our webpage, we must give them styles. We use the properties mentioned above for text styles. Let's know more about these properties.

Font Family

For the font family of the text we use font-family property. This is the name of the font, which we want to use in our webpage.

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

As you see we have given to our <p> tag font-family property. We differentiate two types of families:

  • generic family - a group of font families with a similar look (like "Serif" or "Sans-serif")
  • font family - a specific font family (like "Times New Roman" or "Arial")

When we use specific font family which consists of more than one word, we take the name in quotes (like "Times New Roman"). At the same time, we must write more than one font-family, because in case the browser won't support your first font-family, you can have several other similar font-families.

Font Style

We use font-style property mostly for texts that we want to write italic.

Most of all we use the following values of the font-style property:

  • normal, which shows the text normally,
  • italic , which shows the text in italics,
  • oblique, which “leans” the text.

Example of using the CSS font-style property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="font-style:normal">This is paragraph with font-style property with normal value.</p>
    <p style="font-style:italic">This is paragraph with font-style property with italic value.</p>
    <p style="font-style:oblique">This is paragraph with font-style property with oblique value.</p>
  </body>
</html>

By default our text will be font-style: normal, even without writing this value.

Font Size

For the size of our text, we use font-size property.

We need to give values to our property. The values are given by pixels, pt, em, rem etc. You can find the full list in font-size section . You need to know that 1em=16px. Most of all we use pixels (px).

Example of using the CSS font-size property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h3 style="font-size:40px;"> Some heading with font-size property.</h3>
    <p style="font-size:25px;"> Some paragraph with font-size property.</p>
    <a style="font-size:2em;"> Some link with font-size property.</a>
  </body>
</html>

You need to check it also by yourself. You can do that with our html online editor click here.

Font-Variant

The font-variant property allows to set the text as normal or small-caps from a font family.

The small-caps value makes the lowercase letters to the uppercase letters, but these converted letters will be displayed a little smaller than normal uppercase letters.

Example of using the CSS font-variant property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .smallcaps {
      font-variant: small-caps;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant property example</h2>
    <p>Here we used a normal text as you can see.</p>
    <p class="smallcaps">But We Used A Text With Small-Caps Here.</p>
  </body>
</html>

Font Weight

Now you know that when we have some text, and we want to make our text italic, we use font-style property.

Now let's learn what we can do for making our text bolder in case it isn't a heading because by default the headings are bold.

For that we use font-weight property.

Mostly we use the follow values of the font-weight proparty:

  • normal
  • bold

The value can be given also by numbers.

Example of using the CSS font-weight property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="font-weight:900">Some paragraph with the font-weight property with value bold.</p>
    <p style="font-weight:normal">Some paragraph with the font-weight property with value normal.</p>
    <p style="font-weight:bold">Some paragraph with the font-weight property with value bold.</p>
  </body>
</html>

As you remember we have told that we can give value with numbers 100-900. Value 100 is normal, and 900 is the bolder. And as much as the number grows between 100 and 900, the font becomes bolder.


Browser support

1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

The font-style property can have the following values



Do you find this helpful?

Related articles