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.
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 :
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.
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:
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; ‘geeks’ class applies italic font style with centered text.
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:
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; ‘geeks’ class uses normal weight with centered text.
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:
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; ‘geeks’ class uses ‘normal’ variant, centered text.
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:
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; geeks class uses smaller font size centered text.
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:
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.
HTML
<!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.
HTML
<!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
CSS Fonts – FAQs
What are CSS fonts?
CSS fonts are used to specify the font properties of text, including font family, size, weight, style, and more.
How to set the font family in CSS?
Use the font-family property to specify the font. For example, font-family: Arial, sans-serif;.
What is the font-size property?
The font-size property sets the size of the text. For example, font-size: 16px;.
How to set the font weight?
Use the font-weight property to specify the thickness of the text. Common values include normal, bold, lighter, and numeric values like 400 or 700.
What is the font-style property?
The font-style property sets the style of the text, such as normal, italic, or oblique.
How to set the font variant?
Use the font-variant property to display text in a small-caps font. For example, font-variant: small-caps;.