Skip to content
Related Articles

Related Articles

CSS Fonts

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 06 Oct, 2021
View Discussion
Improve Article
Save Article

Example: In this example we will use few CSS Font’s properties.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS Font</title>
    <style>
        .gfg {
            font-family: "Arial, Helvetica, sans-serif";
            font-size: 60px;
            color: #090;
            text-align: center;
        }
 
        .geeks {
            font-family: "Comic Sans MS", cursive, sans-serif;
            font-variant:small-caps;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">
      A computer science portal for geeks
    </div>
</body>
 
</html>


Output: 

The CSS font is used to set the font’s content of the HTML element. There are many font properties in CSS which are mentioned and briefly discussed below:

Below few examples are given from CSS Font Collection.

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: 

HTML




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

HTML




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

HTML




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

HTML




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

HTML




<!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 arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!