CSS - Fonts

CSS fonts allows to customize font style of webpages using various font related properties. In this tutorial we will understand the font styling in CSS.

What is CSS Font?

In CSS, the font property is used to style and adjust type of text used in webpage.

You can define fonts and customize their appearance by setting properties like font-family , font-size , font-weight and font-style . You can also use the shorthand property font to manipulate all the font style.

Types of CSS Fonts

• Monospace Fonts: The font in which every letter have equal width.

• Serif Fonts: Have small stroke at the edge of each letter.

• San-Serif Fonts: Clean fonts with out any strokes.

• Fantasy Fonts: Decorative fancy fonts.

• Cursive Fonts: The font that resembles human handwriting.

Popular CSS Fonts

Here is a table with some popular font and their generic font-family.

Generic Font Family	Examples of Font Names
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

Setting Text Fonts

The font-family property is used to specify font name for a text content.

Example

In this example, we have used the font-family property to set the font of the paragraph element.

Setting Text Font Size

To set the font size of the text, we use font-size property . You can use its values such as small, medium, and, large to get a variety of font sizes of the text.

Example

In this example, we have used the font-size property with its different values to set the size of the text.

Setting Font Weight

You can use the font-weight property to set the boldness of the text.

Example

In this example, we have used the font-weight property to set the boldness of the text. The valid numeric value is from 100-900 for number class.

Setting Font Style

To set the style of the written text, we use the font-style property . The text can be set to normal, italic or oblique.

Example

In this example, we have used font-style property to set the style of the written text.

CSS Font Shorthand Property

You can use the font shorthand property to modify size, weight, and style of texts.

Example

In this example, we have used the font shorthand property to set font style, weight, size and family.

CSS Font Related Properties

The following table lists all the CSS properties related to font :

Property	Description	Example
font-family	Specifies the font for an element.	Try It
font-size	Specifies the size of the font.	Try It
font-weight	Specifies the boldness of the font.	Try It
font-style	Specifies the style of the font (normal, italic, oblique).	Try It
font-variant	Specifies whether or not a text should be displayed in a small-caps font.	Try It
line-height	Specifies the line height.	Try It