1. css
  2. /properties
  3. /font-synthesis

font-synthesis

Definition

The font-synthesis property controls how font faces are synthesized (or generated) when a specific font face is not available for a given font family and weight.

Examples

Enable font synthesis for all font faces in the body element:

body {
  font-synthesis: weight style;
}

Disable font synthesis for italic font faces in the h1 element:

h1 {
  font-synthesis: weight;
  font-style: italic;
}

Enable font synthesis for all font faces in the input element, but only synthesize bold and oblique font faces for the select element:

input {
  font-synthesis: weight style;
}

select {
  font-synthesis: weight;
  font-weight: bold;
  font-style: oblique;
}

Values

ValueDescription
noneDisables font synthesis
weightSynthesizes font faces with a different weight than the available font face
styleSynthesizes font faces with a different style than the available font face
weight styleSynthesizes font faces with a different weight or style than the available font face
initialSets the property to its default value
inheritInherits the property from its parent element

Best Practices

  • Use font-synthesis sparingly and only when necessary, as synthesized font faces may not always be a good substitute for the intended font face.
  • Consider providing fallback font faces using the @font-face rule, rather than relying on font synthesis.
  • Test your font choices and font synthesis settings on different devices and screen resolutions to ensure legibility and consistency.
  • Be aware that different browsers may handle font synthesis differently, so it's important to test your code on different browsers.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes