The font property specifies several font styling settings.
These include font, color, height, style, weight, and more.
Text with a custom font.
Text with a custom style, size, and font family.
<p style="font: italic 20px Georgia, serif;">
Text with a custom style, size, and font family.
</p>
The font property is a shorthand for these properties:
Two of these are required: font-size and font-family.
The default for most of these properties is normal.
Multiple font family names can be specified. The later ones as fallback.
Fallbacks are applied when the browser does not support the first font.
font: font-style font-variant font-weight
font-size/line-height font-family |
caption | icon | menu | message-box |
small-caption | status-bar |
initial | inherit;
| Value | Description |
|---|---|
| font-style | Font style. Default is normal. |
| font-variant | Font variant. Default is normal. |
| font-weight | Font weight. Default is normal. |
| font-size | Font size and line-height. Default is "normal" |
| font-family | Font family. Default is browser dependent. |
| inherit | Inherits the value from its parent element. |
| Built in browser fonts | |
| caption | Built-in browser font used for captioned controls, such as, buttons. |
| icon | Built-in browser font used for icon labels. |
| menu | Built-in browser font used for dropdown menus. |
| message-box | Built-in browser fonts used for dialog boxes. |
| small-caption | Built-in browser fonts used for small control labels. |
| status-bar | Built-in browser font used in window status bar. |
| initial | Sets the value to its default value. |
Click the buttons to see the different font values.
Font: caption
<style>
.font-example {
font: caption;
}
</style>
<p class="font-example">Font: caption</p>
This table shows when font support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
3.5 | Nov 1998 |
 Safari
|
1.0 | Jun 2003 |
