W3Docs

Appearance

English

CSS Font ​

In this chapter, we will discuss fonts.

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

Font Style

The CSS font property is a shorthand that combines several font properties. Here we will explain the individual properties that compose it:

When adding text or links to a webpage, we style them using these properties. Let's explore them in detail.

Font Family ​

We use the font-family property to specify the font for the text. This defines the name of the font used on the webpage.

CSS Font

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

As you can see, we have applied the font-family property to our <p> tag. 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 a font family name consists of more than one word, enclose it in quotes (e.g., "Times New Roman"). It is also recommended to provide a fallback font family in case the browser does not support the first one.

Font Style ​

We use the font-style property primarily to display text in italics.

The most commonly used values for the font-style property are:

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

Example of the font-style property: ​

Example with CSS font-style property|CSS Font|W3Docs

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

We use the font-size property to set the size of the text.

Values can be specified in pixels, points, em, rem, etc. You can find the full list in the font-size section. Note that 1em equals the computed font size of the parent element (often 16px by default). Pixels (px) are the most commonly used unit.

Example of the font-size property: ​

Example with CSS font-size property|CSS Font|W3Docs

html
<!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 you to set text to normal or small-caps.

The small-caps value converts lowercase letters to uppercase, but displays them at a smaller size than the original uppercase letters.

Example of the font-variant property: ​

Example with CSS font-variant property|CSS Font|W3Docs

html
<!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, let's learn how to make regular text bolder, since headings are bold by default.

We use the font-weight property for this.

The most commonly used values for the font-weight property are:

  • normal
  • bold

Values can also be specified as numbers.

Example of the font-weight property: ​

Example with CSS font-weight property|CSS Font|W3Docs

html
<!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 mentioned, numeric values range from 100 to 900. The value 400 corresponds to normal, and 700 corresponds to bold. As the number increases from 100 to 900, the font becomes bolder.

Practice ​

Which of the following statements are true regarding CSS fonts?

Dual-run preview — compare with live Symfony routes.