The font properties can be used to change aspects of the font and to load custom fonts. They can be applied to any element and they all inherit.
font-family
font-family
sets the face of the font. Its value can be a specific font name such as
times or
verdana; or a generic family name such as
sans-serif,
serif, or
monospace.
font-family : inherit | <family-names> | <generic-families>
The value for this property is a prioritized list of one or more font names. If a browser does not have access to the first font, it uses the next font and so on.
font-family: "Times New Roman", times, serif;
It is recommended to end the list with a family name to make sure that at least the font family is consistent across browsers. Note that if a font name includes spaces, it must be surrounded by double quotes, as in the previous example.
font-size
font-size
sets the size of the font. The value can be any unit of measure or a percentage of the parent’s font size. There are also a couple of predefined values, as listed here:
font-size : inherit | <length> | <percentage> |
smaller | larger | xx-small | x-small |
small | medium | large | x-large | xx-large
The larger and smaller values are relative to the parent’s font size; the other predefined values refer to absolute sizes. The initial size is medium, which is 1 em (16 pixels) for normal text.
font-style
font-style
makes the text slanted. According to specifications,
italic is a cursive companion face to the normal face, and
oblique is a slanted form of the normal face. Both faces tend to be rendered the same way for most fonts, however.
font-style : inherit | normal | italic | oblique
font-variant
font-variant
can be used to display text using small caps instead of lowercase letters. A value of
small-caps renders text in uppercase letters that are smaller than regular uppercase letters.
font-variant : inherit | normal | small-caps
font-weight
font-weight
sets the thickness of the font. The
bolder and
lighter values set the thickness relative to the parent element, and the numeric values specify absolute weights. The value of
bold is equal to 700, and
normal is the same as 400.
font-weight : inherit | normal | bold | bolder |
lighter | 100 | 200 | ... | 900
Even if several weight values can be specified, most fonts have only one type of bold, as shown in the following example rendering:
lighter normal bold bolder 100 200 300 400 500 600 700 800 900
font
There is a convenient shorthand property named
font
that sets all the font properties in one declaration.
font : inherit | <font-style> + <font-variant> +
<font-weight> + <font-size> / <line-height> +
<font-family>
The properties must be specified in the order listed previously. As long as this order is kept, either one of the properties can be left out (except for
font-size and
font-family, which are mandatory). If a property is left out, the default value for that property is used, which is to inherit the parent’s value. The following example applies four font properties to the paragraph element:
p { font: italic 50%/125% Verdana; }
This font declaration sets the font-style, font-size, line-height, and font-family properties in one declaration. Because font-variant and font-weight are not included, a side effect of using this declaration is that they are both re-set to inherit the parent’s value.
Custom Fonts
Selected fonts can be seen only if the font is installed on the device used to view the web site. If a nonstandard font is needed, a
@font-face rule
can be used to load the font from an online location.
@font-face {
font-family: MyFont;
src: url(myfont.ttf);
}
This rule creates a font named
MyFont and provides a URL from which the browser can download it. With this rule in place, the custom font can be used just like any standard font.
p { font-family: "MyFont", arial, sans-serif; }
This use of the @font-face rule is supported in Chrome 5+, Firefox 3.5+, Safari 3.1+, Opera 10+, and IE 9+. If the browser does not support the custom font, it reverts to the next standard font in the list.
