---
title: "CSS Fonts and Their Properties Explained with Examples"
description: "CSS provides several properties to control the appearance of text on a webpage. Here are the most commonly used font-related properties"
author: "Ashutosh Patel"
published: 2025-03-24
updated: 2025-03-24
canonical: https://www.mindstick.com/articles/338851/css-fonts-and-their-properties-explained-with-examples
category: "css-css3"
tags: ["css-css3", "css", "font", "css property"]
reading_time: 3 minutes
---
# CSS Fonts and Their Properties Explained with Examples
CSS provides many [properties](https://www.mindstick.com/blog/673/properties) to [control](https://yourviews.mindstick.com/story/1889/all-you-need-to-know-about-the-lac-line-of-actual-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](https://www.mindstick.com/articles/198559/an-ownership-of-property-in-hua-hin) specifies the type of font to be used for text.
- It can contain [multiple](https://www.mindstick.com/forum/33991/how-to-use-multiple-ng-app-in-a-single-page) font names (fallbacks) in case the font is not available.
## Syntax
```css
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](https://www.mindstick.com/forum/34017/adding-controls-dynamically-in-angularjs) the size of the text. It can be specified as:
- `px` (pixels) → fixed size
- `em` → [relative](https://www.mindstick.com/interview/33881/overview-of-relative-absolute-fixed-and-sticky-positioning-in-css) to [parent element](https://www.mindstick.com/forum/156679/select-any-parent-element-of-any-tag-via-jquery)
- `rem` → relative to [root element](https://www.mindstick.com/interview/1692/what-is-root-element-in-xml)
- `%` → relative to parent
## Syntax
```css
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](https://www.mindstick.com/blog/12043/how-to-create-a-killer-mobile-app-that-supports-your-brand) it.
It accepts values like "`condensed`", "`expanded`", `"ultra-expanded`", "`narrow`", etc.
## Syntax
```css
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**.
```css
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).
```css
Syntax
h1 {
font-weight: bold; /* Bold text */
}
p {
font-weight: 300; /* Light text */
}
```
## Example
```html
CSS Fonts Example
CSS Font Properties Example
This is a paragraph demonstrating different font properties in CSS.
```
## Output
Also, Read: [How do you change the fonts of the webpage](https://www.mindstick.com/interview/33886/how-do-you-change-the-fonts-of-the-webpage)
---
Original Source: https://www.mindstick.com/articles/338851/css-fonts-and-their-properties-explained-with-examples
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.