Open In App

CSS Fonts

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

CSS fonts offer a range of options to style the text content within HTML elements. It gives you the ability to control different aspects of fonts, including font family, font size, font weight, font style, and more.

Example: In this example, we will use a few CSS Font 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: 

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



Last Updated : 21 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads