Tutorialspoint.dev

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:

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



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter