The font property is a shorthand property for the following properties:
You can set all the properties with the following order: 1. font-style, 2. font-variant, 3. font-weight, 4. font-size / line-height, 5. font-family. The line-height property is used for setting the space between lines.
It is required to define font-size and font-family properties' values. If one of the values is missed, its default value is used.
All the individual values of the font-size property that are not specified, will be set to their initial value.
| Initial Value | Default values of the properties. |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | Yes. Font-size, font-weight, font-stretch, and line-height are animatable. |
| Version | CSS1 |
| DOM Syntax | Object.style.font = "talic normal bold 1em/140% "Lucida Grande", sans-serif"; |
Font as a shorthand property
While using this shorthand property you should know some important things about it:
Mandatory values
The "font-size" and "font-family" values are considered to be mandatory ones. The whole declaration will be ignored if one of these values are absent.
Optional values
The other five values are optional. In case of using one of these values, take into account that they must come before the "font-size" value in the declaration, otherwise they will be ignored.
The font and font-stretch properties
The font-stretch property is new in CSS3, and if you use it in an older browser, the whole line will be ignored.
The inheritance for optional values
If you omit the optional values they will not inherit values from their parent element. They will be restored to their initial state.
Keywords that define system fonts
The following values of the font property can be used as keywords:
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
They set the font to the one that is used on the operating system of the user for that specific category. For example, if you specify the “menu” value, the font will be set on that element for using the same font that is used on the operating system for dropdown menus and menu lists.
These keyword-values can only be used with the font shorthand property.
Syntax
font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;Example of the font property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font {
font: italic normal bold 1em/140% "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p>This is some normal paragraph.</p>
<p class="font">This is a paragraph with specified font value.</p>
</body>
</html>Result
Example of the font property defined with italic fonts:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font1 {
font: italic small-caps bold 20px/1 cursive;
}
.font2 {
font: italic 1.2em "Fira Sans", serif;
}
.font3 {
font: 1.2em "Fira Sans", sans-serif;
}
.font4 {
font: small-caps bold 28px/1.5 sans-serif;
}
.font5 {
font: caption;
/* font: menu | icon | message-box | small-caption | status-bar;*/
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p class="font1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Example of the font property, where the font-size, font-weight and line-height are animatable:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
border: 2px solid #666;
width: 350px;
height: 150px;
font: 20px "Fira Sans", sans-serif;
-webkit-animation: element 4s infinite;
animation: element 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes element {
50% {
font: 50px bold;
}
}
/* Standard syntax */
@keyframes element {
50% {
font: 50px bold;
}
}
</style>
</head>
<body>
<h2>Font animation example</h2>
<div class="element">
<p>Some paragraph</p>
</div>
</body>
</html>Values
| Value | Description |
|---|---|
| font-style | Defines the font style. Its default value is normal. |
| font-variant | Defines the font variant. Its default value is normal. |
| font-weight | Defines the font weight. Its default value is normal. |
| font-size/line-height | Defines the font size and the line height. Its default value is normal. |
| font-family | Defines the font family. Its default value depends on the browser. |
| caption | Font which is used for captioned controls (e.g., buttons, drop-downs). |
| icon | Font which is used to label icons. |
| menu | Font which is used in menus (e.g., dropdown menus and menu lists). |
| message-box | Font which is used in dialog boxes. |
| small-caption | Font which is used for labeling small controls. |
| status-bar | Font which is used in window status bars. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.