CSS Font
CSS
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;
}
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;
}
This is a sample paragraph.
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;
}
This is a sample paragraph.
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;
}
This is a sample paragraph.
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;
}
This is a sample paragraph.
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;
}
This is a sample paragraph.
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;
}
This is a sample paragraph.