CSS
In this tutorial we will learn about CSS Font styling property.
We use the font-family property to change the text family.
font-family
In the following example we have set the font-family to Arial.
p { font-family : Arial; }
This is a sample paragraph.
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.
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).
font-size
In the following example we have set the font-size to 30px.
p { font-size : 30px; }
We use the font-style property to set the style of the text like normal, italic and oblique.
font-style
normal
italic
oblique
In the following example we have set the font-style to italic.
p { font-style : italic; }
We use the font-weight property to set thickness of characters of a text.
font-weight
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; }
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.
font-variant
This property can take two values none and small-caps.
none
small-caps
In the following example we have set the font-variant to small-caps.
p { font-variant : small-caps; }
We can combine the properties together using the font properties.
font
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; }