The CSS Font Property

How to change font in CSS

By using the CSS font property, you can define a set of value for the text font:

p.arial-font {
    font: 14px arial, sans-serif;
}      
p.georgia-font {
    font: italic bold 16px/32px Georgia, serif;
}

This property is actually a shorthand for seven subproperties:

• font-stretch
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family

The syntax for CSS text styling

To use the CSS fontshorthand, you need to define the subproperties in a certain order:

font: strech style variant weight size/line-height family;

The only values you must specify to make CSS set font properties are size and family. Other values are optional: if you skip them, the default values will be used instead.

Note: the line height must be defined after the font size with a forward slash between these two values (e.g., 20px/20px).

Using keywords for CSS fonts

Instead of defining each subproperty individually, you can also use keywords to make CSS set font styles:

<ul>
    <li style="font: caption;">Captioned Control Font.</li>
    <li style="font: icon;">Icon Label Font.</li>
    <li style="font: menu;">Dropdown Menu Font.</li>
    <li style="font: message-box;">Dialogue Box Font.</li>
    <li style="font: small-caption;">Smaller Caption Font.</li>
    <li style="font: status-bar;">Status Bar Font.</li>
</ul>

Find all the available values in the table below:

Browser support

Mobile browser support