Others


Others


Font Properties - CSS


The Font properties are used to change the font styles like font family, variant, weight and size.

Property Description Values Example
font-family Specifies the font family for a selected element. Arial, Calibri, Times New Roman, inherit, etc. 
p{
  font-family:Arial;
}
font-size Specifies the font size for a selected element. small, medium, larger, large, length (px, em), %, inherit 
p{
  font-size:12px;
}
font-variant Specifies the text displayed in small caps. normal, small-caps, inherit 
p{
  font-variant:small-caps;
}
font-weight Specifies the font weight for a selected element. normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit. 
p{
  font-weight:bold;
}
font-style Specifies the font style for a selected element. normal, italic, oblique, inherit. 
p{
  font-style:italic;
}
font Sets all the font properties for a selected element. font-style font-variant font-weight font-size font-family 
p{
  font:italic bold 18px Arial;
}
Example 
<html>
  <head>
    <style>
      h2{
        font-family:Arial;
        font-size:30px;
        font-variant:small-caps;
        font-style:italic;
        font-weight:bold;
      }
    </style>
  </head>
  <body>
    <h2>Sample Text</h2>
  </body>
</html>
Try it Yourself

Live Demo