CSS Font property is used to control the look of texts by defining their font family, boldness, size and the style.
Note: Here we have specified two font families Times and Serif. This approach is helpfule when a browser does not support the first one then it tries the next font. Use quotation marks if the name of a font family is more than one word like "Times New Roman".
The posible value for this property can be:
Possible values of the font-size property can be:
CSS Programing
Font Family
The font-family property is used to set the font family of a text.p
{
font-family: Times, serif;
}
Note: Here we have specified two font families Times and Serif. This approach is helpfule when a browser does not support the first one then it tries the next font. Use quotation marks if the name of a font family is more than one word like "Times New Roman".
Font Style
The font-style property is used to specify style (normal, italic or oblique) of the text.The posible value for this property can be:
- normal - Specify a normal text
- italic - Specify a text in italics
- oblique - Specify a text "leaning" (very similar to italic, but less supported)
h1
{
font-style: normal;
}
h2
{
font-style: italic;
}
p
{
font-style: oblique;
}
Font Size
The font-size property is used to sets the size of the text either in absolute (like in pixels, point etc) or relative (like in percentage, em etc).h1
{
font-size: 16px;
}
h2
{
font-size: 2em;
}
The em size unit is recommended by the W3C. 1em = 16px ( 16 px is the default size of text in browsers).Possible values of the font-size property can be:
| Value | Description |
| medium | Sets the font-size to a medium size. This is default |
| xx-small | Sets the font-size to an xx-small size |
| x-small | Sets the font-size to an extra small size |
| small | Sets the font-size to a small size |
| large | Sets the font-size to a large size |
| x-large | Sets the font-size to an extra large size |
| xx-large | Sets the font-size to an xx-large size |
| smaller | Sets the font-size to a smaller size than the parent element |
| larger | Sets the font-size to a larger size than the parent element |
| length | Sets the font-size to a fixed size in px, cm, etc. |
| % | Sets the font-size to a percent of the parent element's font size |
Font Weight
The font-weight property is used to sets the weight (how bold a font) of the text. Possible values for this property could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.h2
{
font-size: 2em;
font-weight:bold;
}
All CSS Font Properties
| Property | Description |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |