diff --git a/files/en-us/web/css/font-synthesis-style/index.md b/files/en-us/web/css/font-synthesis-style/index.md
index 8031c17a5fd0937..bce73c78bf5c2bf 100644
--- a/files/en-us/web/css/font-synthesis-style/index.md
+++ b/files/en-us/web/css/font-synthesis-style/index.md
@@ -17,6 +17,7 @@ It is often convenient to use the shorthand property {{cssxref("font-synthesis")
 /* Keyword values */
 font-synthesis-style: auto;
 font-synthesis-style: none;
+font-synthesis-style: oblique-only;
 
 /* Global values */
 font-synthesis-style: inherit;
@@ -31,7 +32,9 @@ font-synthesis-style: unset;
 - `auto`
   - : Indicates that the missing oblique typeface may be synthesized by the browser if needed.
 - `none`
-  - : Indicates that the synthesis of the missing oblique typeface by the browser is not allowed.
+  - : Indicates that the synthesis of the missing oblique typeface by the browser is _not_ allowed.
+- `oblique-only`
+  - : Same as `auto`, but no font synthesis occurs if `font-style: italic` is set.
 
 ## Formal definition
 
@@ -69,6 +72,7 @@ This example shows turning off synthesis of the oblique typeface by the browser
 .english {
   font-family: "Montserrat", sans-serif;
 }
+
 .no-syn {
   font-synthesis-style: none;
 }
@@ -78,6 +82,94 @@ This example shows turning off synthesis of the oblique typeface by the browser
 
 {{EmbedLiveSample('Disabling synthesis of bold typeface', '', '100')}}
 
+### Comparison of font-synthesis-style values
+
+This example compares all the `font-synthesis-style` values using italic and oblique styled texts.
+
+#### HTML
+
+```html
+<div class="fss-none">
+  <h2>font-synthesis-style: none</h2>
+  <p class="oblique">This text is set to <code>oblique</code></p>
+  <p class="italic">This text is set to <code>italic</code></p>
+</div>
+
+<div class="fss-oblique">
+  <h2>font-synthesis-style: oblique</h2>
+  <p class="oblique">This text is set to <code>oblique</code></p>
+  <p class="italic">This text is set to <code>italic</code></p>
+</div>
+
+<div class="fss-oblique-only">
+  <h2>font-synthesis-style: oblique-only</h2>
+  <p class="oblique">This text is set to <code>oblique</code></p>
+  <p class="italic">This text is set to <code>italic</code></p>
+</div>
+```
+
+#### CSS
+
+```css hidden
+@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
+
+p {
+  font-family: "Montserrat", sans-serif;
+  font-size: 1.2rem;
+}
+
+@supports not (font-synthesis-style: oblique-only) {
+  body::before {
+    content: "Your browser doesn't support the 'oblique-only' value.";
+    background-color: #ffcd33;
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+}
+```
+
+```css
+/* Specify style of the font synthesis */
+.fss-none {
+  font-synthesis-style: none;
+}
+
+.fss-oblique {
+  font-synthesis-style: oblique;
+}
+
+.fss-oblique-only {
+  font-synthesis-style: oblique-only;
+}
+
+/* Set font styles */
+.oblique {
+  font-style: oblique;
+}
+
+.italic {
+  font-style: italic;
+}
+
+/* Styles for the demonstration */
+.oblique::after {
+  content: " (font-style: oblique)";
+  font-size: 0.8rem;
+  vertical-align: sub;
+}
+
+.italic::after {
+  content: " (font-style: italic)";
+  font-size: 0.8rem;
+  vertical-align: sub;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample('Comparison of font-synthesis-style values', '', '560')}}
+
 ## Specifications
 
 {{Specifications}}