font
Shorthand that sets font style, weight, size, line height, and family all at once.
- Initial value
follows its component properties- Inherited
- Yes
- Animatable
- yes, like its component properties
- Applies to
- all elements
- JavaScript
element.style.font = "600 1rem/1.5 system-ui, sans-serif"
Example
#body {
font: 400 1rem/1.6 system-ui, sans-serif;
}
h1 {
font: 700 2rem/1.15 Georgia, serif;
}<h1 style="font: 700 28px/1.15 Georgia, serif; margin: 0 0 8px">Chapter 1</h1>
<p style="font: 400 16px/1.6 system-ui, sans-serif; margin: 0">Body text in the system font, the heading in serif.</p>Definition and usage
#The font property combines several font properties into a single declaration: font-style, font-variant, font-weight, font-size, line-height, and font-family. Size and family are required, and the line height is given right after the size, separated by a slash: 16px/1.5.
Order matters: style, variant, and weight (in any order among themselves) must come before the size, and the family always comes last. For example, italic 600 1.25rem/1.4 Georgia, serif.
The shorthand resets every component you leave out to its default. If you previously set a bold weight and then write font: 16px sans-serif, the bold disappears.
Syntax
#font: <style>? <variant>? <weight>? <size>[/<line-height>]? <family>;Values
#- The minimum: size and family.
italic 600 20px/1.3 Georgia, serif
Style, weight, size with a line height, and family.- Small caps in a fixed-width font.
system font
The font the system uses for captions on interface elements.
Values in practice
#16px sans-serif
.demo { font: 16px sans-serif; }italic 600 20px/1.3 Georgia, serif
.demo { font: italic 600 20px/1.3 Georgia, serif; }small-caps 18px monospace
.demo { font: small-caps 18px monospace; }caption
.demo { font: caption; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Be careful, since the shorthand resets the parts you leave out. When you only want to change the size, use
font-sizealone instead. - In the shorthand, you write the line height right after the size, separated by a slash:
1rem/1.6.
Related entries
#- font-familyPicks a font, with a list of fallback fonts in case the first one is unavailable.
- font-sizeSets the font size.
- font-weightSets the font weight, from thin to extra bold.
- line-heightSets the height of each line of text, the space between lines.
- font-styleTurns on italics or an oblique slant for text.
Spotted a mistake or missing an example? Write to us.