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;
}
.Beginner {
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="Beginner">
A computer science portal for Beginner
</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
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;
}
.Beginner {
font-family: "Comic Sans MS", cursive, sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div class="Beginner">
A computer science portal for Beginner
</div>
</body>
</html>
Output:
CSS font-style Property
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: In this example with CSS: ‘gfg’ class uses bold ‘Times New Roman’ font, 40px size, green color, centered text; ‘Beginner’ class applies italic font style with centered text.
<!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;
}
.Beginner {
font-style: italic;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div class="Beginner">
A computer science portal for Beginner
</div>
</body>
</html>
Output:
CSS font-weight Property
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: In this example using CSS: ‘gfg’ class applies bold ‘Times New Roman’ font, 40px size, green color, centered text; ‘Beginner’ class uses normal weight with centered text.
<!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;
}
.Beginner {
font-weight: normal;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div class="Beginner">
A computer science portal for Beginner
</div>
</body>
</html>
Output:
CSS font-variant Property
It is used to create the small-caps effect. It can be “normal or small-caps”.
Syntax:
font-variant: font variant value;
Example: In this example with CSS: ‘gfg’ class applies ‘small-caps’ variant, bold ‘Times New Roman’ font, 40px size, green color, centered; ‘Beginner’ class uses ‘normal’ variant, centered text.
<!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;
}
.Beginner {
font-variant: normal;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div class="Beginner">
A computer science portal for Beginner
</div>
</body>
</html>
Output:
CSS font-size Property
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: In this example with CSS styling: ‘gfg’ class applies large, bold ‘Times New Roman’ text centered with green color; Beginner class uses smaller font size centered text.
<!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;
}
.Beginner {
font-size: 1.2em;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div class="Beginner">
A computer science portal for Beginner
</div>
</body>
</html>
Output:
CSS font-stretch Property
The CSS font-stretch property adjusts the width of selected fonts, allowing you to make text narrower or wider. It accepts values like normal, condensed, expanded, and specific percentages.
Syntax:
font-stretch: normal|ultra-condensed|extra-condensed|condensed|
semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded;
Example: In this example showcasing font-stretch property with ‘normal’, ‘condensed’, and ‘expanded’ values applied to paragraphs using Arial font, demonstrating text width adjustments for different typographical effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Font Stretch Example</title>
<style>
.normal {
font-family: 'Arial, sans-serif';
font-stretch: normal;
}
.condensed {
font-family: 'Arial, sans-serif';
font-stretch: condensed;
}
.expanded {
font-family: 'Arial, sans-serif';
font-stretch: expanded;
}
</style>
</head>
<body>
<p class="normal">This is normal font stretch.</p>
<p class="condensed">This is condensed font stretch.</p>
<p class="expanded">This is expanded font stretch.</p>
</body>
</html>
Output:
font-stretch Property Example Output
CSS font-kerning Property
The CSS font-kerning property controls the use of kerning, which adjusts the space between characters for better readability. It can take values like auto, normal, and none to enable, use default kerning, or disable kerning, respectively.
Syntax:
font-kerning: auto|normal|none;
Example: In this CSS example demonstrating font-kerning properties with different settings (‘auto’, ‘normal’, ‘none’) applied to paragraphs using Arial font, illustrating kerning effects in typography.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Font Kerning Example</title>
<style>
.kerning-auto {
font-family: 'Arial, sans-serif';
font-kerning: auto;
}
.kerning-normal {
font-family: 'Arial, sans-serif';
font-kerning: normal;
}
.kerning-none {
font-family: 'Arial, sans-serif';
font-kerning: none;
}
</style>
</head>
<body>
<p class="kerning-auto">Kerning is set to auto.</p>
<p class="kerning-normal">Kerning is set to normal.</p>
<p class="kerning-none">Kerning is set to none.</p>
</body>
</html>
Output:
font-kerning Property Example Output
Contact Us