Grow your CSS skills. Land your dream job.

font

Last updated on:

The font property in CSS is a shorthand property that combines all the following properties in one declaration.

font-stretch - normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded

font-style - normal, italic, oblique, inherit

font-variant - normal, small-caps, inherit

font-weight - normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit

font-size - xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, <length>, percentage, inherit

line-height - normal, number (font-size multiplier), <length>, percentage

font-family - sans-serif, serif, monospace, cursive, fantasy, caption, icon, menu, message-box, small-caption, status-bar, "string"

The font property can combine all that, like this:

font: [font-stretch] [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
body {
  font: normal small-caps normal 16px/1.4 Georgia;
}

Font Shorthand Gotchas

The font property is not as straightforward as other shorthand properties, partly due to the syntax requirements for it, and partly due to inheritance issues.

Here is a summary of some of the things you should know when using this shorthand property.

Mandatory Values

Two of the values in font shorthand are mandatory: font-size and font-family. If either of these is not included, the entire declaration will be ignored.

Also, font-family must be declared last of all values, otherwise, again, the entire declaration will be ignored.

Optional Values

All five of the other values are optional. If you include any of font-style, font-variant, and font-weight, they must come before font-size in the declaration. If they aren't, they will be ignored and may also cause the mandatory values to be ignored.

body {
    font: italic small-caps bold 44px Georgia, sans-serif;
}

In the above example, three optionals are included. As long as these are defined before font-size, they can be placed in any order.

Including line-height is likewise optional but may be declared only after font-size and only following a forward slash:

body {
    font: 44px/20px Georgia, sans-serif;
}

In the above example, the line-height is "20px". If you omit line-height, you must also omit the slash, otherwise the entire line will be ignored.

Using font-stretch

The font-stretch property is new in CSS3 so if it is used in an older browser that doesn't support font-stretch in font shorthand, it will cause the entire line to be ignored.

The spec recommends including a fallback without font-stretch, like this:

body {
    font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */
    font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif;
}

Inheritance for optionals

If you omit any of the optianal values (including line-height), the omitted optionals will not inherit values from their parent element, as is often the case with typographical properties. Instead, they will be reset to their initial state.

For example:

body {
    font: italic small-caps bold 44px/50px Georgia, sans-serif;
}

p {
    font: 30px Georgia, sans-serif;
}

In this case, the optional values (italic, small-caps, and bold) are placed on the font declaration on the <body> element. These will also apply to most child elements.

However, because we've redeclared the font property on the paragraph elements, all the optionals will be reset on the paragraphs, causing the style, variant, weight, and line-height to revert to their initial values.

Keywords for Defining System Fonts

In addition to the above syntax, the font property also allows use of keywords as values. They are:

  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar

These keyword values set the font to the one that is used on the user's operating system for that particular category. For example, defining "caption" will set the font on that element to use the same font that is used on the operating system for captioned controls (buttons, drop-downs, etc).

A single keyword comprises the entire value:

body {
    font: menu;
}

The other properties mentioned earlier are not valid in conjunction with these keywords. These keywords can only be used with font shorthand and cannot be declared using any of the individual longhand properties.

Related Properties

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any Any Any Any Any

Comments

  1. James Williams
    Permalink to comment#

    Hey there – The Jonathan Snook: font size with rem link has died!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".