CSS | Fonts - GeeksforGeeks

The CSS font property is used to set the fonts content of HTML element. There are many font property in CSS which are discussed below:

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

font-family: It is used to set the font type of an HTML element. It holds several font names as a fallback system.
Syntax:

font-family: "font family name";

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>font-family property</title> 
        <style> 
            .gfg { 
                font-family:"Times New Roman"; 
                font-weight:bold; 
                font-size:40px; 
                color:#090; 
                text-align:center; 
            } 
            .geeks { 
                font-family:"Comic Sans MS", cursive, sans-serif; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <div class = "geeks">A computer science portal for geeks</div> 
    </body> 
</html>                                  

Output:
font-family

font-style: It is used to specify the font style of an HTML element. It can be “normal, italic or oblique”.
Syntax:

font-style: style name;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>font-style property</title> 
        <style> 
            .gfg { 
                font-style:normal; 
                font-family:"Times New Roman"; 
                font-weight:bold; 
                font-size:40px; 
                color:#090; 
                text-align:center; 
            } 
            .geeks { 
                font-style:italic; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <div class = "geeks">A computer science portal for geeks</div> 
    </body> 
</html>                     

Output:
font-style

font-weight: It is used to set the boldness of the font. Its value can be “normal, bold, lighter, bolder”.
Syntax:

font-weight: font weight value;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>font-weight property</title> 
        <style> 
            .gfg { 
                font-weight:bold; 
                font-style:normal; 
                font-family:"Times New Roman"; 
                font-size:40px; 
                color:#090; 
                text-align:center; 
            } 
            .geeks { 
                font-weight:normal; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <div class = "geeks">A computer science portal for geeks</div> 
    </body> 
</html>                     

Output:
font-weight

font-variant: It is used to create the small-caps effect. It can be “normal or small-caps”.
Syntax:

font-variant: font variant value;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>font-variant property</title> 
        <style> 
            .gfg { 
                font-variant: small-caps; 
                font-weight:bold; 
                font-family:"Times New Roman"; 
                font-size:40px; 
                color:#090; 
                text-align:center; 
            } 
            .geeks { 
                font-variant:normal; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <div class = "geeks">A computer science portal for geeks</div> 
    </body> 
</html>                     

Output:
font-variant

font-size : It is used to set the font size of an HTML element. The font-size can be set in different ways like in “pixels, percentage, em or we can set values like small, large” etc.
Syntax:

font-size: font size value;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>font-size property</title> 
        <style> 
            .gfg { 
                font-size:40px; 
                font-weight:bold; 
                font-family:"Times New Roman"; 
                color:#090; 
                text-align:center; 
            } 
            .geeks { 
                font-size:1.2em; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <div class = "geeks">A computer science portal for geeks</div> 
    </body> 
</html>                     

Output:
font-size

My Personal Notes

Recommended Posts: