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 –

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.