If a font family does not contain typeface for weight, italics or small-caps, some CSS3-compatible browsers may synthesize the appearance of text for the purpose of style matching (i.e. they will try to create the weight, italics and/or small-caps style themselves).
In CSS3, the font-synthesis property can be used to control if the browser is allowed to synthesize bold, oblique/italics and small-caps for font faces when a font family lacks the respective typeface(s).
For example, you can specify individually which typefaces the browser is allowed to synthesize like so:
font-synthesis: weight; /* allow synthesis for bold */ font-synthesis: style; /* allow synthesis for italic */ font-synthesis: small-caps; /* allow synthesis for small-caps */
Alternatively, you may also add the font-synthesis property values in a short-hand form like so:
font-synthesis: weight style small-caps;
Font synthesis may create an unexpected look across different browsers which might not be the look you expect. To prevent this behavior, the font-synthesis property can be set to none like so:
/* prevent browser from synthesizing bold, italic and small-caps */ font-synthesis: none;
Please check browser compatibility / support before using or relying on the font-synthesis property.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.