Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Last Updated : 18 Jun, 2022
View Discussion
Improve Article
Save Article

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>

Output:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!