The CSS font properties define the font family, boldness, size, and the style of a text.
CSS Font Families
In CSS, there are two types of font family names:
- generic family - a group of font families with a similar look (like "Serif" or "Monospace")
- font family - a specific font family (like "Times New Roman" or "Arial")
Font Family
The font family of a text is set with the
font-family property.
The
font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
p {
font-family: "Times New Roman", Times, serif;}
font-family: "Times New Roman", Times, serif;}
Font Style
The
font-style property is mostly used to specify italic text.
This property has three values:
- normal - The text is shown normally
- italic - The text is shown in italics
- oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
p.normal {
font-style: normal;}
p.italic {
font-style: italic;}
p.oblique {
font-style: oblique;}
font-style: normal;}
p.italic {
font-style: italic;}
p.oblique {
font-style: oblique;}
Set Font Size With Pixels
Setting the text size with pixels gives you full control over the text size:
h1 {
font-size: 40px;}
h2 {
font-size: 30px;}
p {
font-size: 14px;}
font-size: 40px;}
h2 {
font-size: 30px;}
p {
font-size: 14px;}
Font Weight
The
font-weight property specifies the weight of a font:
p.normal {
font-weight: normal;}
p.thick {
font-weight: bold;}
font-weight: normal;}
p.thick {
font-weight: bold;}
