How to set all the font properties in one declaration using CSS ?

Last Updated : 06 Jun, 2023

In this article, we will learn how to set all the font properties in one declaration using CSS. This can be used for quickly setting the required font properties without specifying each of them separately.

Approach: We will use the font property of CSS which is the shorthand property for all the font properties. This takes five values font-style, font-variant, font-weight, font-size, and font-family. The font-size and font-family properties must be set for this property to work. All the properties that are to be used are defined in the below order:

font-style: It is the style of the font.
font-variant: It sets whether the font should be displayed in small-caps.
font-weight: It set the weight of the font.
font-size: It set the size of the font.
font-family: It set the family of the font.

Syntax:

font: font-style font-variant 
      font-weight font-size 
      font-family

Example: In this example, we are using the above-explained method.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            /* font: font-weight font-variant 
               font-size font-style */
            font: bold small-caps 30px serif;
        }
 
        .gfg {
            column-count: 3;
            column-gap: 50px;
            column-rule: 5px dotted blue;
        }
    </style>
</head>
 
<body>
    <div class="parent">
        <div class="gfg">
            GeeksforGeeks is my favourite site where
            i can gain a lot of knowledge and can
            also share my knowledge what I have
            gained while learning. We can add
            more pharagraphs for content.
        </div>
    </div>
</body>
</html>