CSS font Property

Description

The font property is shorthand that allows you to do one of two things: you can either set up six of the most mature font properties in one line, or you can set one of a choice of keywords to adopt a system font setting.

Initial value
See individual properties
Applies to
All elements
Inherited
Yes
Media
Visual
Computed value
See individual properties
Animatable
See individual properties
CSS Version
CSS1, CSS2, CSS3
JavaScript syntax
object.style.font

Syntax

Formal syntax: [ [ <font-style> || <font-variant> || <font-weight> || <font-stretch> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar 

Values

  • <font-style>See the font-style CSS property for values.
  • <font-variant>See the font-variant CSS property for values.
  • <font-weight>See the font-weight CSS property for values.
  • <font-size>See the font-size CSS property for values.
  • <font-family>See the font-family CSS property for values.

Example

body {
   font: bold .9em sans-serif;
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
312113.51
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37184Yes1Yes