CSS Font

In this CSS tutorial, we will be discussing all the properties associated with the font. The font property is generally used to style and manipulate the font of the text content, and in this article, we will be going through all the important CSS font-properties that you should know. CSS Font

CSS Font

Font Properties Description
font-family This property can change the face of the font.
font-style It can make the font italic, oblique, and normal.
font-variant It can create small-caps effects
font-weight It can increase and decrease the boldness of the font.
font-size It can 3increase and decreases the size of the font.
font It is a shorthand which can specify all the above property in a single statement.

CSS font-family property

Using the font-family property, we can define a specific font face for an element text content. The values for a font-family is set by using the font name.

Example 

<html>
   <head>
   </head>
   <body>
      <p style = "font-family: cursive; ">
        It's a paragraph with cursive font family
      </p>
   </body>
</html>

Preview

It's a paragraph with cursive font family

Note: We can also pass more than one values to a single font-family property and the browser will try to read the first supported one. 

p {
font-family: "Times New Roman", Times, serif;
}

CSS font-style property

The font-style property can define the three different stylings to an element text content.

  • normal
  • italic
  • oblique

Example 

<p style = "font-style: oblique; ">
It's a paragraph with oblique font-style
</p>

Preview

It's a paragraph with oblique font-style

CSS font-variant property

The font-variant property defines whether an element text content should be rendered in small-caps or not. It accepts four values, normal, small-caps, initial and inherit.

Example 

<p style = "font-variant: small-caps;">
This Paragraph Lowercase Letters Will Be Converted To The UpperCase
But, The Converted Letters Will Be Rendered Small Than The Unconverted
Uppercase Letters.
</p>

Preview

This Paragraph Lowercase Letters Will Be Converted To The UpperCase But, The Converted Letters Will Be Rendered Small Than The Unconverted Uppercase Letters.

CSS font-weight property

The font-weight property defines how much a font boldness should be. It accepts values like normal, bold, bolder, lighter, 100, 200, 300,… 1000, etc.

Example 

<p style = "font-weight: normal;">
Paragraph with normal font-weight
</p>

<p style = "font-weight: bolder;">
Paragraph with bolder font-weight
</p>

<p style = "font-weight: lighter;">
Paragraph with lighter font-weight
</p>

<p style = "font-weight: 400;">
Paragraph with 400 font-weight
</p>

<p style = "font-weight: 800;">
Paragraph with 800 font-weight
</p>

Preview 

Paragraph with normal font-weight

Paragraph with bolder font-weight

Paragraph with lighter font-weight

Paragraph with 400 font-weight

Paragraph with 800 font-weight

CSS font-size

The font-size property defines the size of an element text content. It accepts values in length unit and names like small, medium and large.

Example 

<p style = "font-size:  large;">
Paragraph with large font-size
</p>

<p style = "font-size: small;">
Paragraph with small font-size
</p>

<p style = "font-size: 20px;">
Paragraph with 20px font-size
</p>

Preview

Paragraph with large font-size

Paragraph with small font-size

Paragraph with 20px font-size

CSS font Property

The font property is a shorthand for all the properties we have discussed above. Using the single font property, we can manipulate set all these properties using a single line.

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

Syntax 

font : font-style font-variant font-weight font-size font-family;

Example 

<p style=" font: oblique small-caps bolder 12px cursive;">
        It's a paragraph
 </p>

Preview

It's a paragraph

Summary

  • The font property can change and style the font of an element text content.
  • The font-style property deals with values like normal, italic and oblique.
  • The font-family property defines the family for the text content.
  • The font-variant property determines whether the text should be small-caps or not.
Previous Tutorial Next Tutorial