html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS font property

Definition

The CSS font property allows us to combine the other CSS font properties into one handy shorthand property. So we can combine font-style, font-variant, font-weight, font-size, line-height and font-family in one place. This can save a lot of typing and makes our styles easier to read, but we must follow a few basic rules when using this property.

  • The font-size and font-family are mandatory options.
  • Property values are seperated by spaces.
  • Seperate fonts using commas.
  • When specifying the line-height add a slash after the font-size property.
  • The last two properties must be font-size or font-size/line-height followed by font-family.
  • All other properties can be written in any order before the last two properties mentioned above.

Applies To

All elements.

Property Values

inherit - The font properties are inherited from the parent element.

Property values are the same as those set for the individual font properties.

There are also additional system fonts available when using the CSS font property. When using system fonts all the font properties must be initialized together, although they can be changed individually after initialisation.

The available system fonts are :-.

caption - This system font is used for drop-downs, buttons and such.

icons - This system font is used for icons.

menu - This system font is used for drop-down menus and menu lists.

message-box - This system font is used for dialog boxes.

status-bar - This system font is used for status bars.

Default Value

When using the CSS font property, font related properties are set to their initial values, see individual properties for default settings. Those properties that are then set in the CSS font property, will have their defaults overwritten.

Inheritance

The font properties are inherited from the parent element if none are applied to the current element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS font property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS font Property</title>


<style type="text/css">

/* Body font family to Times New Roman to show inheritance */
body {
  font: 1.6em "Times New Roman";
}

/* h1 headings all font set to show shorthand */
h1 {
  font: italic bold small-caps 1.8em/200% Arial;
}

/* h2 headings font family set to inherit (inherits from parent element) */
h2 {
  font: inherit;
}

/* h3 headings font family selection seperated by commas */
h3 {
  font: 0.8em Georgia, Times, serif;
}

/* Paragraph font size set to 0.3em, line height to 150%, font family set to fantasy */
p {
  font: 0.5em/150% fantasy;
}

</style>

</head>
<body>
<h1>H1 Headings Set With our font shortcuts</h1>
<h2>H2 Headings Inherit From Body Element 
    So Font Family Will Be Set To Times New Roman </h2>
<p>Paragraph with a small fantasy font.
    This has been set with larger than normal line heights.</p>
<h3>H3 Font Family offers a selection of serif fonts</h3>
</body>
</html>

How It Looks

The results of using the font property with the values above will look something like the following:

notepad
CSS float    << Prev          Next >>   CSS font-family

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.