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.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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 having a similar look (like "Serif" or "Sans-serif")
font family - a particular 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 the 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>

Try it Yourself »

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

<!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>

Try it Yourself »

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 the 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>

Try it Yourself »

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 the 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>

Try it Yourself »

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.