CSS Fonts and Their Properties Explained with Examples

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 size
em → relative to parent element
rem → 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

CSS Fonts and Their Properties Explained with Examples

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

articles

CSS Fonts and Their Properties Explained with Examples

Ashutosh Kumar Verma

Leave Comment

Comments

Liked By