Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

font

Allows you to specify multiple font-related properties at once. The properties you can set together are: 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', and 'font-family'.

There are rules for writing the values, and if they are not followed, all 'font' property settings will be invalidated. See below for details.

Sample Code

/* Set font size to 16px, line height to 20px, and font family to sans-serif. */
p.test { font: 16px/20px sans-serif;}

/* Set font weight to bold, font style to italic, font size to 16px, and font family to serif. */
p.test1 { font: bold italic 16px serif;}

Browser Display Result

<p style=" font: 16px/20px sans-serif;">This is a p element with 'font: 16px/20px sans-serif' applied.</p>

<p style=" font: bold italic 16px serif;">This is a p element with 'font: bold italic 16px serif' applied.</p>

Browser Compatibility

Desktop

Chrome

1 and later ○

Firefox

1 and later ○

Safari

1 and later ○

Edge

12 and later ○

Supported in all versions.

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5 and later ○

2 and earlier ×

Mobile

iOS Safari

1 and later ○

Android Browser

4.4 and later ○

3 and earlier ×

Chrome Android

Latest ○

Same as the desktop version.

Firefox Android

Latest ○

Same as the desktop version.

※ Version data is based on MDN.

Overview

Allows you to specify multiple font-related properties at once.

The following rules must be followed when writing values. If these rules are not met, all 'font' property values will be completely invalidated.

The values for 'font-size', 'font-style', and 'font-family' must all be specified.
When defining 'font-style', 'font-variant', or 'font-weight', they must appear before the value of 'font-size'.
To set 'line-height', specify it immediately after the 'font-size' value, separated by a '/'.
The required 'font-family' value must be specified last in the 'font' shorthand.

Here is a sample of setting the 'line-height' value via the 'font' shorthand. Use '/' as the separator.

/* Set font size to 16px, line height to 20px, and font family to sans-serif. */
p.test { font: 16px/20px sans-serif;}

Note that 'font-stretch', 'font-size-adjust', and 'font-kerning' cannot be set directly via the 'font' shorthand — they will be reset to their initial values.

Because 'font' has tricky rules and can unintentionally reset other properties, it is not the most convenient shorthand to use. Exercise caution when using it.

If you find any errors or copyright issues, please contact us.

Home