font

Definition

The font shorthand property is used to set all the font properties at once, including font-style, font-weight, font-size, line-height, and font-family. The properties are specified in the order shown, but any individual properties that are not specified are set to their default values.

Examples

This example sets the font property with a font size of 16px and a default font family:

p {
  font: 16px;
}

This example sets the font property with a font style of italic, a font weight of bold, a font size of 24px, a line height of 1.2, and a font family of Georgia:

h1 {
  font: italic bold 24px/1.2 Georgia, serif;
}

This example sets the font property with a font weight of 600, a font size of 1.5em, and a font family of "Open Sans", sans-serif:

blockquote {
  font: 600 1.5em "Open Sans", sans-serif;
}

Values

Best Practices

• Use the font shorthand property to set all of the font properties at once, especially when using a consistent font across your entire site or application. This can make your code more concise and easier to read.
• Specify the properties in the correct order (i.e., font-style, font-weight, font-size, line-height, and font-family) to avoid any unexpected behavior or results.
• Use relative units such as em or rem to specify font sizes, as these units are more flexible and adaptable to different device sizes and screen resolutions.
• Specify a fallback font family at the end of the font-family property list, in case the desired font is not available on the user's device.
• Test your font styles on different devices and screen sizes to ensure that they are legible and effective.

Browser Compatibility