CSS | Fonts

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                                 

chevron_right






                        filter_none








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:











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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>                     



















                        chevron_right







                        filter_none








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:











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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>                     



















                        chevron_right







                        filter_none








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:











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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>                     



















                        chevron_right







                        filter_none








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:











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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>                     



















                        chevron_right







                        filter_none








Output:

font-size



          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
letsLearnCode
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.