Examples of CSS font Property with font-family, font-size,font-variant and font-style properties

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .font1 {
        font: italic small-caps bold 20px/1 cursive;
      }
      .font2 {
        font: italic 1.2em "Fira Sans", serif;
      }
      .font3 {
        font: 1.2em "Fira Sans", sans-serif;
      }
      .font4 {
        font: small-caps bold 28px/1.5 sans-serif;
      }
      .font5 {
        font: caption;
        /* font: menu | icon | message-box | small-caption | status-bar;*/
      }
    </style>
  </head>
  <body>
    <h2>Font property example</h2>
    <p class="font1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="font2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="font3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="font4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="font5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>