CSS Fonts

In this tutorial you will learn about the CSS Fonts and its application with practical example.

CSS Fonts property allows us control the way content or text being presented on the web page, using CSS Fonts we can add more styling and formatting to the content on a web page.

Here is the list of common CSS Fonts Properties –

Property Description
font-family This property specifies the face/family of the font for the HTML Element. Example – Serif,Sans-serif,Mono space
font-style This property specifies the style of the font for the HTML Element. Example – Normal,Italic,Oblique
font-variant This property sets the font to be small-caps for HTML Element
font-stretch This property can be used for condensing or expanding your font for the HTML Element. Example – Normal,Wider,Narrower etc.
font-weight This property specifies how bold will be the the font for the HTML Element. Example – Bold,Bolder,Lighter etc.
font-size This property specifies the size of the font for the HTML Element. Example – Small,Medium,Large etc.
font This is shorthand property can be used to set all properties of the font for the HTML Element.

CSS Font Family

This property specifies the face/family of the font for the HTML Element. Example – Serif,Sans-serif, Monospace

Example Code:

Output:

This text is rendered in sans serif font .

CSS Font Style

This property specifies the style of the font for the HTML Element. Example – Normal,Italic,Oblique

Example Code:

Output:

This text is in italics.

CSS Font Variant

This property sets the font to be small-caps for HTML Element.

Example Code:

Output:

This Text in Small Caps.

CSS Font Stretch

This property can be used for condensing or expanding your font for the HTML Element. Example – Normal,Wider,Narrower etc.

Example Code:

Expanded version of the font.

CSS Font Weight

This property specifies how bold will be the the font for the HTML Element. Example – Bold,Bolder,Lighter etc.

Example Code:

Output:

This text is in bold.

CSS Font Size

This property specifies the size of the font for the HTML Element. Example – Small,Medium,Large etc.

Example Code:

Output:

This text is using a font size x-large;.

CSS Font Property

This is shorthand property can be used to set all properties of the font for the HTML Element.

Example Code:

Output:

The styles for this text has been specified with the ‘font’ shorthand property.

In this tutorial we have learn about the CSS Fonts and its application with practical example. I hope you will like this tutorial.