CSS provides many properties to control the appearance of text on a webpage. Below are the most commonly used font-related properties,
1. font-family
(Font Type)
- The
font-family
property specifies the type of font to be used for text. - It can contain multiple font names (fallbacks) in case the font is not available.
Syntax
p {
font-family: Arial, Helvetica, sans-serif;
}
Key Points
- If
Arial
is available, it will be used. - If not, the browser tries
Helvetica
. - If both are not available, it defaults to
sans-serif
(a common font).
2. font-size
(Font Size)
The font-size property controls the size of the text. It can be specified as:
px
(pixels) → fixed sizeem
→ relative to parent elementrem
→ relative to root element%
→ relative to parent
Syntax
h1 {
font-size: 32px; /* Fixed size */
}
p {
font-size: 1.2em; /* 1.2 times the parent size */
}
3. font-stretch
(Font Width)
The font-stretch property adjusts the width of the text if the font supports it.
It accepts values like "condensed
", "expanded
",
"ultra-expanded
", "narrow
", etc.
Syntax
p {
font-stretch: expanded; /* Text is slightly wider */
}
Note: This property only works if the font supports different widths.
4. font-style
(Italic or Normal)
The font-style property is used to make the text italic, normal, or oblique.
p {
font-style: italic; /* Italic text */
}
h2 {
font-style: oblique; /* Similar to italic, but slanted more */
}
5. font-weight
(Boldness of Text)
The font-weight property controls the boldness of text.
It accepts the following values:
normal
bold
light
bolder
Numeric value (100 - 900) (100 = thin, 900 = extra bold).
Syntax
h1 {
font-weight: bold; /* Bold text */
}
p {
font-weight: 300; /* Light text */
}
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fonts Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
text-align: center;
}
h1 {
font-size: 40px;
font-weight: bold;
font-style: italic;
font-stretch: ultra-expanded;
color: #007BFF;
}
p {
font-size: 20px;
font-weight: 300;
font-style: normal;
font-stretch: condensed;
color: #333;
}
</style>
</head>
<body>
<h1>CSS Font Properties Example</h1>
<p>This is a paragraph demonstrating different font properties in CSS.</p>
</body>
</html>
Output

Also, Read: How do you change the fonts of the webpage
Leave Comment