<p class="supports">👋 Your browser does not currently support the <code>font-synthesis</code> property.</p>

<div class="syn">
  <p class="syn-none">This line of text applies the <code>none</code> keyword, so nothing should be <strong>bold</strong> or <i>oblique</i>.</p>

  <p class="syn-weight">This line of text applies the <code>weight</code> keyword, so <strong>bold</strong> should be synthesized, but <i>oblique</i> is not.</p>

  <p class="syn-style">This line of text applies the <code>style</code> keyword, so <strong>bold</strong> should not be synthesized, but <i>oblique</i> should be.</p>

  <p class="syn-style">This line of text applies the <code>weight</code> and <code>style</code> keywords, so <strong>bold</strong> and <i>oblique</i> should be synthesized.</p>
</div>

body {
  font-family: "Lato", sans-serif;
}

.syn-none {
  font-synthesis: none;
}
.syn-weight {
  font-synthesis: weight;
}
.syn-style {
  font-synthesis: style;
}
.syn-both {
  font-synthesis: weight style;
}

/* PRESENTATIOJNAL STYLES */
body {
  padding: 2em;
}

code {
  background: #eaeaea;
  padding: 3px;
}

.supports {
  display: block;
}

@supports (font-synthesis: none) {
  .supports {
    display: none;
  }
}

.syn {
  background: #fffde7;
  border-radius: 16px;
  padding: 1em 2em;
}

.syn code {
  background: #e9e6ca;
  padding: 3px;
}