font
A shorthand that sets the style, weight, size, line height and family of the font in one line.
Syntax
font: style weight size/line-height family;Values
| Parameter | Type | Description |
|---|---|---|
| font-style | keyword | Optional: `italic` or `normal`. |
| font-weight | number | Optional: `bold`, `400`, `700`… |
| font-size | length | Required: `16px`, `1.2rem`. |
| line-height | number | Optional, after a slash: `16px/1.5`. |
| font-family | list | Required, always last: `Georgia, serif`. |
Examples
Several font properties in one line:
<style>
.title { font: bold 24px/1.2 Georgia, serif; }
.note { font: italic 14px sans-serif; }
</style>
<p class="title">A bold serif title</p>
<p class="note">A small italic note</p>Form fields do not inherit the font by default — font: inherit fixes that:
<style>
button, input { font: inherit; }
</style>
<p style="font-size: 18px;">
<input placeholder="Same font as the text"> <button>Send</button>
</p>Notes
The size and the family are required, and the family must come last. Every part you leave out is reset to its default value, so font written after font-weight can quietly cancel the weight.
See also
- font-family — The font family, with a list of fallbacks.
- font-size — The size of the font.
- font-weight — The weight (boldness) of the font.
- line-height — The height of a line of text — the distance between lines.
Related recipes
In the tutorial
- Text and fonts — Font family, size, weight, italics, line height, alignment and text decoration, plus loading your own font.