CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS Font Properties


CSS Font properties are various type like font-family, font-size, font-style, font-weight properties and many more.

Using this font properties you can change the font formatting style. Here are some CSS font properties listed.


CSS font-family

CSS font-family property to define font face name with one or more font. Single Quote (' ') is first priority to apply first. If that font not available then left to right opational apply (eg. Courier).

Example Code:

<body>
	<p style="font-family:'Courier New', Courier, monospace;">This example is CSS font family example. Font family type is 
	Courier New, Curier, monospace type text can be display</p>
</body>
		

Run it...   »

Example Result:

This example is CSS font family example. Font family type is Courier New, Curier, monospace type text can be display.


CSS font-size

CSS font-size property set the font size.

Example Code:

<body>
	<p style="font-size:18px;">This example font size is 18 pixels</p>
</body>
		

Run it...   »

Example Result:

This example font size is 18 pixels

CSS font-style

CSS font-style property use to set font style like normal, italic, oblique.

Example Code:

<body>
	<p style="font-style:normal;">This text type Normal</p>
	<p style="font-style:italic;">This text type Italic</p>
	<p style="font-style:oblique;">This text type Oblique</p>
</body>
		

Run it...   »

Example Result:

This text type Normal

This text type Italic

This text type Oblique


CSS font-weight

CSS font-weight property use to set font weight like bold, bolder, lighter.

Example Code:

<body>
	<p style="font-weight:normal;">This example font weight type Normal</p>
	<p style="font-weight:bold;">This example font weight type Bold</p>
	<p style="font-weight:lighter;">This example font weight type Lighter</p>
</body>
		

Run it...   »

Example Result:

This example font weight type Normal

This example font weight type Bold

This example font weight type Lighter

CSS font-variant

CSS font-variant property set word first capital letter can be display in variant style.

Example Code:

<body>
	<p style="font-variant:small-caps;">Example is Font-Variant Style</p>
</body>
		

Run it...   »

Example Result:

Example is Font-Variant Style