CSS Reference Property

font-synthesis

The font-synthesis property is used to specify whether the browser is allowed to synthesize bold or oblique font faces when the font family used does not contain bold or oblique faces.

Normally, a browser would synthesize bold and oblique font faces when these faces are chosen using the font-weight and font-style properties, respectively, if these faces are not available as part of the font family’s faces. This may not always be desired by web designers, so this property can be used to disable that feature.

If the value of the font-synthesis property is set to none, font synthesis is completely disabled. If either or both weight and style keywords are used, either or both bold and oblique font synthesis is enabled.

Trivia & Notes

Please refer to the font-weight and font-style entries for more information on the browser behavior for each of these properties.

Official Syntax

Syntax:

font-synthesis: none | [ weight || style ]

Initial: weight style
Applies To: all elements
Animatable: no

Values

The possible values of the font-synthesis property are the following:

none: Font synthesis by the browser is completely disabled. Neither bold nor oblique faces are synthesized if they don’t exist in the font family.
weight: Only a bold font face is synthesized by the browser if it is not available in the font family. The browser is not allowed to synthesize an oblique font face because the style keyword is absent.
style: Only an oblique font face is synthesized by the browser if it is not available in the font family. The browser is not allowed to synthesize a bold font face because the weight keyword is absent.
weight style: The initial browser behavior. The browser synthesizes both a bold font face and an oblique font face if either of them is not available in the font family.

Examples

font-synthesis: none;           /* browser is not allowed to synthesize any font faces */
font-synthesis: style;          /* browser is not allowed to synthesize a bold font face */
font-synthesis: weight;         /* browser is not allowed to synthesize an oblique font face */
font-synthesis: weight style;   /* browser will synthesize bold and oblique faces if either is not available */

Live Demo

The font-synthesis property is currently not supported in any browser.

Eric Meyer has created a font-synthesis test that tests how the property should work in supporting browsers. You can find his test here.

Browser Support

The font-synthesis property is currently not supported in any browser. (November 4^th, 2014)