CSS: font property
This CSS tutorial explains how to use the CSS property called font with syntax and examples.
Description
The CSS font property is a shorthand property for setting the font-style, font-variant, font-weight, font-size, line-height, and font-family CSS properties.
Syntax
The syntax for the font CSS property is:
font: font-style font-variant font-weight font-size [/ line-height] font-family;Parameters or Arguments
font-style is optional. It is the style of a font. It can be one of the following:
(If font-style is not provided, the default is normal)
| Value | Description |
|---|---|
| normal | Normal font-style p { font: normal 12px Verdana, Geneva, sans-serif; } |
| italic | Italic font-style (if italic is not available, oblique is displayed instead) p { font: italic 12px Verdana, Geneva, sans-serif; } |
| oblique | Oblique font-style p { font: oblique 12px Verdana, Geneva, sans-serif; } |
font-variant is optional. It is the variant of a font. It can be one of the following:
(If font-variant is not provided, the default is normal)
| Value | Description |
|---|---|
| normal | Normal font-variant p { font: normal 10px Georgia, "Times New Roman", Times, serif; } |
| small-caps | Small-caps font-variant p { font: small-caps 10px Georgia, "Times New Roman", Times, serif; } |
font-weight is optional. It is the weight or boldness of a font. It can be one of the following:
(If font-weight is not provided, the default is normal)
| Value | Description |
|---|---|
| normal | Normal font-weight (Normal = 400 font-weight) p { font: normal 12px "Courier New", Courier, monospace; } |
| bold | Bold font-weight (Bold = 700 font-weight) p { font: bold 12px "Courier New", Courier, monospace; } |
| bolder | One font-weight darker than its parent element p { font: bolder 12px "Courier New", Courier, monospace; } |
| lighter | One font-weight lighter than its parent element p { font: lighter 12px "Courier New", Courier, monospace; } |
| 100, 200, 300, 400, 500, 600, 700, 800, 900 | Numeric values for font-weight ranging from 100-900, where 100 is the lightest, 900 is the boldest. 400 = normal, and 700 = bold. p { font: 400 12px "Courier New", Courier, monospace; } |
font-size is generally required. It is the size of the font. It can be one of the following:
| Value | Description |
|---|---|
| fixed | Fixed value expressed in px, em, ... p { font: 12px; Arial, Helvetica, sans-serif; } p { font: 14em Arial, Helvetica, sans-serif; } |
| percentage | Percentage value p { font: 75% Arial, Helvetica, sans-serif; } |
| xx-small, x-small, small, medium, large, x-large, xx-large | Keyword font-sizes ranging from xx-small to xx-large, where medium is the default size p { font: large Arial, Helvetica, sans-serif; } |
| smaller, larger | One font-size larger or smaller than its parent element's font size p { font: larger Arial, Helvetica, sans-serif; } |
line-height is optional. It is the height used in the calculation of the line box height for an inline element, and the minimal height of the line box for a block level element. It is provided in conjunction with the font-size value. It can be one of the following:
(If line-height is not provided, the default is normal)
| Value | Description |
|---|---|
| normal | Normal value used by browsers div { font: 12px/normal Arial, Helvetica, sans-serif; } |
| number | Unitless number value that is multiplied by the element's font size div { font: 12px/1.5 Arial, Helvetica, sans-serif; } |
| fixed | Fixed value expressed in pt, em, ... div { font: 12px/12pt Arial, Helvetica, sans-serif; } div { font: 12px/1.5em Arial, Helvetica, sans-serif; } |
| percentage | Percentage value div { font: 12px/150% Arial, Helvetica, sans-serif; } |
| none | No line-height is applied to the element div { font: 12px/none Arial, Helvetica, sans-serif; } |
font-family is generally required. It is a list of font family names. It can be one of the following:
| Value | Description |
|---|---|
| family-name | Name of a font family. If the font family name contains whitespace, the value must be enclosed in quotation marks. Some of the family-name values are (there are many more):
|
| generic-family | Generic font families are used as a fallback mechanism in case none of the other family-names listed are available. These values must NOT be enclosed in quotation marks. Generic-family names can be one of the following:
|
Note
- The values listed in the font-family value are comma separated.
- The values listed in the font-family value are listed in priority. So the browser will try each of the font families in the order listed, until it finds one that is available.
- If the font-family name contains whitespace, you must enclose the name in quotation marks. ie: "Trebuchet MS".
- When creating your font-family list, start with specific family-names first and end with one generic-family at the end of the list.
Suggested font-family Lists
To help give you an idea of how to create our own font-family list, here are some of our suggestions:
- Verdana, Geneva, sans-serif
- Georgia, "Times New Roman", Times, serif
- "Courier New", Courier, monospace
- Arial, Helvetica, sans-serif
- Tahoma, Geneva, sans-serif
- "Trebuchet MS", Arial, Helvetica, sans-serif
- "Arial Black", Gadget, sans-serif
- "Times New Roman", Times, serif
- "Palatino Linotype", "Book Antiqua", Palatino, serif
- "Lucida Sans Unicode", "Lucida Grande", sans-serif
- "MS Serif", "New York", serif
- "Comic Sans MS", cursive
Browser Compatibility
The CSS font property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the font property below, exploring examples of how to use this property in CSS.
p { font: 16px Arial, Helvetica, sans-serif; }In this CSS font example, we have set the font-size to 16px. We have set the font-family in the <p> tag to first Arial. If Arial is not available, the browser will try Helvetica. If Helvetica is not available, the browser will try the generic font family called sans-serif.
Next, let's look at a CSS font example where we have whitespace in the font-family value.
span { font: 14px "Comic Sans MS", cursive; }In this CSS font example, we have set the font-size to 14px. Then we have set the font-family to Comic Sans MS which has whitespace in the name. In this case, the family-name must be enclosed in quotation marks as follows: "Comic Sans MS". If Comic Sans MS is not available, the browser will try the generic font family called cursive.
Advertisements