CSS font Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The font CSS property is a shorthand property that allows web developers to define various font-related properties in a single declaration. It typically includes attributes such as the font size, font family, font style, font weight, and line height. This property simplifies the process of specifying the desired typography for text elements on a web page, making it more efficient and concise. For example, a font declaration might look like this: font: 16px Arial, sans-serif;, which sets the font size to 16 pixels and the font family to Arial, with a fallback to a generic sans-serif font if Arial is not available.

Initial value: See individual properties
Applies to: All elements
Inherited: Yes
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.font

Interactive Demo

font: 1.2rem "Fira Sans", sans-serif;

font: italic 1.2rem "Fira Sans", serif;

font: italic small-caps bold 14px/2 cursive;

font: small-caps bold 22px/1 sans-serif;

font: caption;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

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

Editor