CSS Font Property is used to control the Look of Fonts. Both the Font Property and the Text Property control the Visual Appearance of the Properties Content. With CSS Font Property you can set the font color, size, weight etc. And Fonts can also be made responsive.
In this tutorial we will give you complete information about CSS Font Property. For the convenience of studies, we have divided this Tutorial into several parts.
Variety of Font Properties
CSS provides lots of different font properties to customize fonts. Which are being mentioned below.
font-family Property
This Property is used to Declare the Font Family of any HTML Element.There are two types of Font Family in CSS.
Generic Font Family – This font family consists of groups of similar looking Font Families.
Font Family – There is only one Particular Font Family.
You can declare more than one Font Families through font-family Property. This is done because of browsers, because not all browsers support all fonts.
font-style Property
The font-style property is used to declare the style of fonts. That is how you want to see Fonts. Most of the fonts used by it are to Italicize. It has three possible values.
- normal
- italic
- oblique
With Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Font Style Property</title></head>
<body>
<p style="font-style:normal;">This Paragraph Text is Normal.</p>
<p style="font-style:italic;">This Paragraph Text is Italic.</p>
<p style="font-style:oblique;">This Paragraph Text is Oblique.</p>
</body>
</html>
font-variant Property
Fonts of Variant are Declare by this Property. It has two possible values:
normal – It contains Font Normal.
Small-caps – In this, the size of Fonts is smaller than other Fonts and Fonts are converted to Uppercase.
With Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Font Variant Property</title></head>
<body>
<p style="font-variant:normal;">This Paragraph Text Variant is Normal.</p>
<p style="font-variant:small-caps;">This Paragraph Text Variant is Small Caps.</p>
</body>
</html>
font-weight Property
This Font Property is used to declare the weight of fonts. That is, how bold your font will be. It has bold, bolder and lighter possible values. Apart from this, you can also declare custom weight.
With Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Font Weight Property</title></head>
<body>
<p style="font-weight:normal;">This Paragraph Text Weight is Normal.</p>
<p style="font-weight:bold;">This Paragraph Text Weight is Bold.</p>
</body>
</html>