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-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
style keywords are used, either or both bold and oblique font synthesis is enabled.
Trivia & Notes
Please refer to the
font-style entries for more information on the browser behavior for each of these properties.
font-synthesis: none | [ weight || style ]
- Initial: weight style
- Applies To: all elements
- Animatable: no
The possible values of the
font-synthesis property are the following:
- Font synthesis by the browser is completely disabled. Neither bold nor oblique faces are synthesized if they don’t exist in the font family.
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
stylekeyword is absent.
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
weightkeyword 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.
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 */
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.
font-synthesis property is currently not supported in any browser. (November 4th, 2014)
- CSS Fonts Module Level 3
font-synthesisproperty test by Eric Meyer