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


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


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


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


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


Output:
font-size



My Personal Notes arrow_drop_up

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.