CSS Font Properties

The font properties are used to set the various font oriented properties.

CSS supports following basic font properties:

1. font-family

  • This property sets the font for the text.
  • It uses the font type such as Times new roman, Arial etc. which are supported by all the browsers.

2. font-style

This property is mostly used to specify italic text.

This property has three values:

  • Normal: It shows normal text.
  • Italic: It show italic text.
  • Oblique: It is similar to italic but has less support.

3. font-variant

This property has two values:

1. normal

2. small-caps
  • In this all lower case letters are converted to upper case letters.
  • The converted upper case letters are shown in a smaller font size than the original uppercase letters in the text.

4. font-weight

This property has following possible values.
  • normal
  • bold
  • bolder
  • lighter
  • 100-900

5. font-size

This property sets the size of the text.

The possible values of font size are:
  • normal
  • length like 10px, 14 pt etc.
  • Absolute like xx-small, medium, large, x-large, xx-large.
  • Relative like smaller, larger
  • Percentage like 80%, etc.

Example: Font properties

<html>
     <head>
          <title>External style sheet</title>
          <style type="text/css">
          .fp
             {
                  font-family: verdana;
             }
             .fp1
             {
                  font-style:italic;
             }
             .fp2
             {
                  font-variant: normal;
             }
             .fp3
             {
                  font-variant: small-caps;   
             }
             .fp4
             {
                  font-weight: normal;
             }
             .fp5
             {
                  font-weight: lighter;
             }
             .fp6
             {
                  font-weight: bold;
             }
             .fp7
             {
                  font-weight: 800;
             }
             .fp8
             {
                  font-size: normal;
             }
             .fp9
             {
                  font-size: xx-small;
             }
             .fp10
             {
                  font-size: 30px;
             }
          </style>
     </head>
     <body>
          <h2>This is an example of font property</h2>
          <p class="fp">This paragraph shown in the verdana font</p>
          <p class="fp1">This paragraph in italic</p>
          <p class="fp2">This paragraph shows normal value of font-variant property.</p>
          <p class="fp3">This is the result of small-caps value</p>
          <p class="fp4">It is a font weight property</p>
          <p class="fp5">Font-weight lighter</p>
          <p class="fp6">Font-weight bold</p>
          <p class="fp7">The font weight is 800<p>
          <p class="fp8">It is a font size property</p>
          <p class="fp9">font-size xx-small</p>
          <p class="fp10">font-size 30px</p>
     </body>
</html>


Output:
font property
▲