CSS Font

In this tutorial we will learn about CSS Font styling property.

font-family

We use the font-family property to change the text family.

In the following example we have set the font-family to Arial.

p {
	font-family : Arial;
}

We can also set multiple font families separating them using comma.

In the following example we have set the font-family to Helvatica, Arial, "Lucida Grande".

p {
	font-family : "Lucida Grande", Helvatica, Arial;
}

Note! If a font family name has a space between the words then we enclose the name in quotes.

When we use multiple font family names then the browser will check the first font and if it is not available then it will move to the next font and so on. If no font is found then the browser will use its default font.

font-size

We use the font-size property to set the size of the font. This can take value in unit length (cm, mm, px etc), percentage (10% etc).

In the following example we have set the font-size to 30px.

p {
	font-size : 30px;
}

font-style

We use the font-style property to set the style of the text like normal, italic and oblique.

In the following example we have set the font-style to italic.

p {
	font-style : italic;
}

font-weight

We use the font-weight property to set thickness of characters of a text.

This property can take value like 100, 200, ..., 900. Where 100 is for the thinnest and 900 the thickest.

In the following example we have set the font-weight to 100 (thin).

p {
	font-weight : 100;
}

font-variant

We use the font-variant property to display text in small-caps font. This means all the letters that are in lowercase are converted to uppercase but are of smaller font.

This property can take two values none and small-caps.

In the following example we have set the font-variant to small-caps.

p {
	font-variant : small-caps;
}

font shorthand

We can combine the properties together using the font properties.

font: font-style font-variant font-weight font-size/line-height font-family;

Click here for CSS Text tutorial.

p {
	font : italic small-caps 100 30px/40px Helvatica, Arial;
}