CSS Font

font-family

This property is used to specify the list of font family names separated by comma to indicate that they are alternatives.

HTML snippet:

<div>
Hello world! This is a sample text
</div>

CSS snippet:

div{
background-color : #e1e1e1;
font-family : sans-serif;
}

Output:

The text within <div> element will be displayed in sans-serif font.

font-style

This property selects between normal, italic and oblique faces within the font family.

HTML snippet:

<div>
<span id="normal">
Hello world! This is a normal text
</span><br>
<span id="italic">
Hello world! This is a italic text
</span><br>
<span id="oblique">
Hello world! This is a oblique text
</span><br>
</div>

CSS snippet:

div{
background-color : #e1e1e1;
font-family : sans-serif;
}

#normal{
font-style : normal;
}

#italic{
font-style : italic;
}

#oblique{
font-style : oblique;
}

Output:

Respective font styles of the font-family are applied to the text.

font-weight

This property selects the weight of the font.

Applicable values:

Value from 100 to 900 (in multiples of 100)

normal – 400

bold – 700

bolder

lighter

HTML snippet:

<div>
<span id="normal">
Hello world! This is a normal text
</span><br>
<span id="bold">
Hello world! This is a bold text
</span><br>
<span id="bolder">
Hello world! This is a bolder text
</span><br>
<span id="lighter">
Hello world! This is a lighter text
</span><br>
</div>

CSS snippet:

div{
background-color : #e1e1e1;
font-family : sans-serif;
}
 
#normal{
font-weight : normal;
}

#bold{
font-weight : bold;
}

#bolder{
font-weight : bolder;
}

#lighter{
font-weight : lighter;
}

Output:

Respective font weights are applied to the text.