CSS Fonts

06 Oct, 2021
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:
CSS font-family Property: The font-family property specifies the font of an element.
CSS font-style Property: If we want to give designing to any type of text then we can make the use of CSS font-style property.
CSS font-weight Property: The font-weight property of the CSS is used to set the weight or thickness of the font being used with the HTML Text.
CSS font-variant Property: The font-variant property is used to converted all lowercase letters into uppercase letters.
CSS font-size Property: The font-size property in CSS is used to set the font size of text in HTML document.
CSS font-stretch Property: The font-stretch property in CSS is used to set the text wider or narrower. 
CSS font-kerning Property: This property is used to control the usage of the Kerning Information that has been stored in the Font.
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-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-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-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-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:  
ysachin2314
shubhamyadav4
CSS-Basics
Picked
CSS
HTML
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.