Which property is used as shorthand to specify a number of other font properties in CSS ?

Last Updated : 18 Jun, 2022

In this article, we are going to discuss a property that is used as shorthand to specify different font properties.

The font property is a shorthand property for various font-related properties.

Shortening the code in Cascade Style Sheet (CSS) helps to specify all individual related properties into a single property. The font property is used as shorthand for various font properties like font-size, font-style, font-family, font-weight and font-variant.

Font properties:

font-size: It specifies the size of the text.
font-style: It specifies the style of text such as normal, italic, or oblique.
font-family: It specifies the font for the text.
font-weight: This property specifies how thick the text should be displayed.
font-variant: It specifies whether the text is represented in small caps or not.

Note: The font-size and font-family are required properties and even if not specified, set the default values for the properties.

Example 1: Let’s look into the sample example program that uses the font property.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        h1 { 
          font: 30px,Serif; 
        } 
  
        p { 
          font: italic 10px Georgia, Sans-serif; 
        } 
    </style> 
</head> 
<body> 
    <center> 
        <h2 style="color:green">GeeksforGeeks</h1> 
        <p>Geeks for Geeks-One of the best online  
          content providing, learning platform.</p> 
    </center> 
</body> 
</html> 

Output:

Example 2: In this example code, we will apply all font related properties in a single shorthand code.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
      p{     
        font:italic normal 250 50px "Times New Roman"; 
      } 
    </style> 
</head> 
<body> 
    <center> 
         <h2 style="color:green">GeeksforGeeks</h2> 
         <b>Font shorthand Property</b> 
          <!--font style italic-->
          <!--font variant normal-->
          <!--font weight 250-->
          <!--font size 20-->
          <!--font family Time New Roman-->
          <p>Default code has been loaded into the Editor.</p> 
    </center> 
</body> 
</html> 