CSS Reference Property

font-synthesis 6k6s6v

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. 365337

Normally, a browser would synthesize bold and oblique font faces when these faces are chosen using the 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.

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

Official Syntax 55184y

  • Syntax:

    font-synthesis: none | [ weight || style ]
  • Initial: weight style
  • Applies To: all elements
  • Animatable: no

Values 584j31

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 3e5p5z

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 2x4j2k

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

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

Browser k5t66

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

Further Reading 4g1p1d

Written by

Last updated June 11, 2020 at 9:31 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.