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

font: [ [ <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

<p class="test">font: italic small-caps bold 12px / 30px courier; background-color: orange;</p> 
<p class="test2">font: caption;</p>
<p class="test3">font: icon; </p>
<p class="test4">font: menu; </p>
<p class="test5">font: message-box; </p>
<p class="test6">font: small-caption;</p>
<p class="test7"> font: status-bar;</p>
.test { 
   font: italic small-caps bold 12px / 30px courier; 
   background-color: orange;  
} 
.test2 { 
   font: caption;  
}
.test3 { 
   font: icon;  
} 
.test4 { 
   font: menu;  
} 
.test5 { 
   font: message-box;  
} 
.test6 { 
   font: small-caption;  
} 
.test7 { 
   font: status-bar;  
}

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

Last updated by CSSPortal on: 1st November 2019