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.
<!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:
- CSS font-family Property: The font-family property specifies the font of an element.
- CSS font-style Property: If we want to give design to any type of text then we can make 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 convert all lowercase letters into uppercase letters.
- CSS font-size Property: The font-size property in CSS is used to set the font size of the text in an 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:
<!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:
<!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:
<!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:
<!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:
<!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: