articles

home / developersection / articles / css fonts and their properties explained with examples

CSS Fonts and Their Properties Explained with Examples

CSS Fonts and Their Properties Explained with Examples

Ashutosh Kumar Verma 519 24-Mar-2025

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


Updated 24-Mar-2025

Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Leave Comment

Comments

Liked By