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

    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