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

HTML

<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>

CSS

.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;  
}

Result

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop

3	12	1	1	3.5	1

Tablets / Mobile

≤37	18	4	14	1	1.0

Last updated by CSSPortal on: 1st November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu