CSS font-family Property
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: In this example we are using CSS font-family.
<!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">w3wiki</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
Output:
CSS Fonts
CSS fonts are used to style the text within HTML elements. The font-family property specifies the typeface, while font-size, font-weight, and font-style control the size, thickness, and style of the text. Combining these properties enhances the typography and readability of web content.
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">w3wiki</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 :
Table of Content
- CSS font-family Property
- CSS font-style Property
- CSS font-weight Property
- CSS font-variant Property
- CSS font-size Property
- CSS font-stretch Property
- CSS font-kerning Property